1

I am trying to place a glyphicon inside a input form using placeholder via bootstrap.

but the result is its displaying the code in input form instead icon.

here's my code:

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

output:

Displaying as 

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

inside a input form.

sorry for unclear question

It should be actually when i click over the input form and enter some text the glyphicon should go hidden as we place in a placeholder.

Thanks in advance.

Vijay
  • 114
  • 1
  • 2
  • 16
  • This question already has an answer here: http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box – cristian Mar 08 '15 at 10:26

1 Answers1

2

try like this

 <!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>

Further, you can refer below URL, which gives syntax and format for many bootstap related issues.

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

Anto S
  • 2,448
  • 6
  • 32
  • 50
  • 1
    _hey i got the glyphicons in text form,thanks.But i need glyphicons to be hidden when we enter text in the input form(same like placeholder)._ – Vijay Mar 10 '15 at 15:17
  • for that you have to use some jquery stuffs, is it okay? – Anto S Mar 10 '15 at 19:17
  • http://stackoverflow.com/questions/8987428/image-placeholder also this may be helpful, if you are okay with jQuery stuff let me know – Anto S Mar 10 '15 at 19:34
  • sorry i dint understand jquery but im trying with the example code. – Vijay Mar 11 '15 at 14:05