Question

我正在尝试使用占位符通过bootstrap在输入表单中放置一个glyphicon。

但结果是它以输入形式显示代码而不是图标。

这是我的代码：

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

输出：

显示为

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

在输入表单中。

抱歉不明白的问题

实际应该是当我点击输入表格并输入一些文字时，当我们放置在占位符中时，glyphicon应该隐藏。

提前致谢。

Answer 1

试试这个

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

如何使用bootstrap将glyphicon放置在输入表单的占位符中

1 个答案: