在文本框中显示字体真棒图标答案

【问题标题】：Showing font awesome icon inside text box在文本框中显示字体真棒图标
【发布时间】：2017-05-28 10:37:15
【问题描述】：

我有一个专注于焦点的文本框，我正在检查 mail_id 是否已经注册，如果没有注册，那么我想在文本框（右侧）中显示正确的符号（正确的字体真棒符号），如果没有然后我想显示十字符号。

我试过了

HTML

<div class="col-md-6 col-lg-6">
  <input type="text" name="user.mailId" id="mailid" placeholder="Mail Id" class="form-control rgn"/>
  </div>

jQuery

$(document).on('focusout', '#mailid', function (event) {
  $('#mailid').addClass('availablle');
  });

CSS

.availablle {
  position:relative;
  } 
  .available:before {
  content: "&#xf00c"; 
  font-family: FontAwesome;
  left:-5px;
  position:absolute;
  top:0;
  color:green;
  }

我的代码是here 我指的是this

【问题讨论】：

stackoverflow.com/questions/26325789/… - 参考这个答案你可能会得到一些帮助。

标签： jquery html css

【解决方案1】：

不能使用 :before, :after 进行输入。新建并添加“可用”类。

【讨论】：

【解决方案2】：

这是一个演示，您可以使用并参考您的应用程序使用情况。 Js fiddle showing what can be in use for you

希望这会有所帮助:)。

【讨论】：

【解决方案3】：

我相信你正在寻找的东西已经内置在引导程序中（我假设你正在根据你的 jsfiddle 使用它）

可在此处获得：http://getbootstrap.com/css/#forms-control-validation

此选项使用引导字形图标，但如果您想使用字体很棒的图标，我在下面创建了一个选项。它只是切换图标。

http://codepen.io/Mkapin/pen/XpKbLM?editors=1100

glyphicon glyphicon-ok --> fa fa-check

  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess2">Input with success</label>
    <input type="text" class="form-control">
    <span class="fa fa-check form-control-feedback"></span>
    <span id="inputSuccess2Status" class="sr-only">(success)</span>
  </div>

【讨论】：

【解决方案4】：

我试过了

<div class="form-group">
  <label class="col-md-4 col-lg-4 control-label" for="user.mailId">Mail id</label>
  <div class="col-md-6 col-lg-6">
    <input type="text" name="user.mailId" id="mailid" placeholder="Mail Id" class="form-control rgn" />
  </div>
</div>

 $(document).on('focusout', '#mailid', function(event) {
    $('#mailid').closest('.form-group').addClass('has-success').addClass("has-feedback");
    $('#mailid').after('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');

  });

【讨论】：