使用Javascript为焦点上的文本框设置类

Question

我有以下HTML Bootstrap代码

 <div class="form-group">
            <label class="col-sm-2 control-label labelfont">FIRST NAME:</label>
            <div class="col-sm-6">
               <input type="text" class="form-control" placeholder="Enter the First Name" id="FirstName" onkeypress="return onlyAlphabets(event);">
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_FirstName">Enter the first name</label>
        </div>

我在Tabout上的JS代码如下

$("#FirstName").blur(function () {
    if ($(this).val().trim().length == 0)
    {
        $(this).addClass('borderclass');
        $("#Err_FirstName").show();   
    }
    else {
        $("#Err_FirstName").hide();
        $(this).removeClass('borderclass');
    }
});

＆＃39; borderclass＆＃39;如图所示

.borderclass
{ 
     border:1px solid red;
}

以上代码在Tab out上工作正常。

但是在将焦点移回控件以输入值时，我再也看不到红色边框了。

我认为bootstrap对每个控件都有自己的css，当焦点返回到控件时它会被设置。为了解决这个问题，我尝试了以下操作，但是没有工作

  $("#FirstName").focusin(function () {
    if($("#Err_FirstName").visible)
        $(this).addClass('borderclass');
});

任何正确方向的帮助都会受到赞赏。谢谢。

Answer 1

样式被bootstrap覆盖，你可以添加这个

.borderclass:focus {
    border: 1px solid red;
    box-shadow: 0px 0px 2px 0px red;
    outline: 0;
}

演示 - http://www.bootply.com/XpOUxMMhdT

Answer 2

jQuery对象中没有visible属性。但是$.fn.is可以执行您想要的操作。也就是说，您可以使用伪选择器:visible作为is方法中的参数，该方法返回一个布尔值。

$("#FirstName").focusin(function () {
   if($("#Err_FirstName").is(":visible"))
      $(this).addClass('borderclass');
}