Как разместить глификон внутри заполнителя в форме ввода с помощью бутстрапа

Я пытаюсь поместить глификон внутри формы ввода, используя placeholder через бутстрап.Как разместить глификон внутри заполнителя в форме ввода с помощью бутстрапа

, но результатом является его отображение кода в форме ввода вместо значка.

вот мой код:

<input type="text" class="form-control" placeholder="<span class='glyphicon glyphicon-search'></span>search">

выход:

Показано, как

<span class="glyphicon glyphicon-search">search

внутри формы ввода.

жаль неясного вопрос

Это должно быть на самом деле, когда я нажимаю над формой ввода и введите текст glyphicon должен идти скрытый, как мы помещаем в заполнителе.

Заранее спасибо.

источник

2015-03-08 Vijay

Этот вопрос уже есть ответ здесь: http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box – cristian

попробовать, как этот

<!DOCTYPE html> 
<html> 
<title>Timer</title> 
<head> 
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" /> 
<script src="https://code.jquery.com/jquery-2.1.3.js"></script> 
<script> 
     jQuery(function(){ 
      $('#exampleInputAmount').blur(function(){ 
       var textValue = $(this).val(); // GETTING TEXT BOX VALUE 
       if(textValue != '') { 
        $('.glyphicon-search').parent().hide(); // HIDDING DIV IF TEXT BOX IF NOT EMPTY 
       } else { 
        $('.glyphicon-search').parent().show(); // SHOWING DIV IF TEXT BOX IF EMPTY 
       } 
      }); 
     }); 
    </script> 
</head> 
<body> 
<form class="form-inline"> 
    <div class="form-group"> 
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> 
    <div class="input-group"> 
     <div class="input-group-addon"><span class="glyphicon glyphicon-search"></div> 
     <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount"> 
     <div class="input-group-addon"><span class="glyphicon glyphicon-search"></div> 
    </div> 
    </div> 
</form> 
</body> 
</html>

Кроме того, вы можете обратиться ниже URL, который дает синтаксис и формат для многих вопросов, связанных с bootstap.

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-lists.php

источник

2015-03-08 10:27:00 Butterfly

_hey я получил glyphicons в виде текста, спасибо . Но мне нужно, чтобы глификоны были скрыты, когда мы вводим текст во входной форме (такой же, как и заполнитель) ._ – Vijay

для этого вам нужно использовать некоторые вещи jquery, все в порядке? – Butterfly

http://stackoverflow.com/questions/8987428/image-placeholder также это может быть полезно, если вы в порядке с jQuery-материалами, дайте мне знать – Butterfly

Как разместить глификон внутри заполнителя в форме ввода с помощью бутстрапа

ответ

Смежные вопросы