如何使用 jquery 在输入文本 ::after 中添加字体真棒图标？答案

【问题标题】：How to add a font awesome icon into input text ::after with j query?如何使用 jquery 在输入文本 ::after 中添加字体真棒图标？
【发布时间】：2017-07-07 14:08:12
【问题描述】：

我有一个像这样的图像的注册表单：

在我使用 jQuery 代码检查有效电子邮件后，该代码：

function isEmail(email) {
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            return regex.test(email);
        }

我想在我的电子邮件输入表单之后插入一个很棒的字体图标（如果为真，请检查图标，如果为假，请检查十字图标），如下图：

那么我如何使用 jQuery 来做到这一点并且我想为这个图标设置颜色呢？

【问题讨论】：

标签： jquery web

【解决方案1】：

看起来:before 和:after 不适用于输入，您必须为输入容器设置此项。

试试这个方法看看是否有帮助：

HTLM：

<div class="container">
<h3>Enter valid email</h3>
<div class="input-container" id="email-container">
  <input type="text" required placeholder="you@example.com" id="email" />
</div>
</div>

CSS：

.input-container{
  position:relative;
  height:32px;
}
.input-container input{
  width:100%;
  padding:8px;
}
#email-container:before,
#email-container:after{
  position:absolute;
  right:10px;
  top:10px;
  font-family: FontAwesome;
  z-index:1;
  display:none;
}
#email-container:before{
   content:'\f00c';
   color: green;
 }
#email-container:after{
   content:'\f00d';
   color: red
}
.valid-email:before{
  display:block !important;
}
.invalid-email:after{
  display:block !important;
}
.valid{
  border:1px solid green;
}
.invalid{
  border:1px solid red;
}

JS：

$(function(){
    $('#email').bind({
    blur: function(){
        if($(this).val() != ''){
        if(isEmail($(this).val())){
            $('#email-container').removeClass('invalid-email').addClass('valid-email');
          $(this).removeClass('invalid');
          $(this).addClass('valid');
        }else{
            $('#email-container').removeClass('valid-email').addClass('invalid-email');
          $(this).removeClass('valid');
          $(this).addClass('invalid');
        }
      }
    }
  });
});

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

在此处查看此解决方案的实际效果：https://jsfiddle.net/pkm05tax/

【讨论】：

似乎 font awesome 不支持 :after stat 因为我无法在输入后添加图标 :(
@KhangHoàngNgô 是的，所以像上面的解决方案一样使用它。在行动中看到它jsfiddle.net/pkm05tax
你玩fb吗？我可以加你的朋友吗？我的网络道路有很多问题：v，你能帮帮我吗？
哎呀！我的代码有问题。我在输入文本（电子邮件图标）中添加了一个字体真棒图标，所以如果我使用你的代码，我的“添加的图标”将被替换，我能做什么，请帮帮我？
@KhangHoàngNgô 是的，我使用 Facebook：fb.me/ssjuma

【解决方案2】：

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

$('.email').on('submit', function(e) {
  e.preventDefault();
  var emailAddress = $(this).find('input[type=text]').val();
  if (isEmail(emailAddress)) {
  	$(this).find('input[type=text]').addClass('fa-check')
  } else {
  	$(this).find('input[type=text]').addClass('fa-times')
  };
});

<form class="email">
  <input type="text" class="fa">
  <button>Submit</button>
</form>

【讨论】：

那么我该如何设置这个图标的颜色呢？
@KhangHoàngNgô 你可以用CSS改变它，即.fa-check{color: green}和.fa-times{color : red}