[英]Showing font awesome icon inside text box
I have a textbox on focus out, I am checking is if mail_id is already registered or not if not registered then I want to show the right symbol(correct font awesome symbol) in the text box(right side) and if not then I want to show the cross symbol. 我有一个重点关注的文本框,我在检查是否已注册mail_id,如果尚未注册,则想在文本框(右侧)中显示正确的符号(正确的字体真棒符号),如果没有,我想要显示十字符号。
I tried following 我尝试了以下
Html 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 jQuery的
$(document).on('focusout', '#mailid', function (event) {
$('#mailid').addClass('availablle');
});
CSS 的CSS
.availablle {
position:relative;
}
.available:before {
content: "";
font-family: FontAwesome;
left:-5px;
position:absolute;
top:0;
color:green;
}
I believe what you are looking for is already built into bootstrap (I am making an assumption that you are using this based off your jsfiddle) 我相信您正在寻找的东西已经内置在引导程序中(我假设您正在基于jsfiddle使用它)
and is available here: http://getbootstrap.com/css/#forms-control-validation 并在此处提供: http : //getbootstrap.com/css/#forms-control-validation
This option uses the bootstrap glyphicons but if you want to use font-awesome icons I have created an option below. 该选项使用引导字形,但是如果您想使用超棒的图标,我在下面创建了一个选项。 It's just switching out the icons.
它只是切换图标。
http://codepen.io/Mkapin/pen/XpKbLM?editors=1100 http://codepen.io/Mkapin/pen/XpKbLM?editors=1100
glyphicon glyphicon-ok --> fa fa-check 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>
Can not be used :before, :after for input. :before,:after不能用于输入。 Make new and add class "available".
新建并添加类“可用”。
Here is a demo you can use and refer for your application usage. 这是一个演示,您可以使用并参考您的应用程序用法。
Js fiddle showing what can be in use for you
Hope this helps :). 希望这可以帮助 :)。
I tried this 我试过了
<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>');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.