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

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');
    }
});

'borderclass'如图

.borderclass
{ 
     border:1px solid red;
}

以上代码在 Tab out 上运行良好。

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

我认为 bootstrap 为每个控件设置了自己的 css 当焦点返回到 control.In 时设置以解决此问题，我尝试了以下方法，没用

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

在正确方向上的任何帮助都会 appreciated.Thanks 很多。

Answer 1

jQuery 对象中没有 visible 属性.. 但是 $.fn.is 可以满足您的需求。也就是说，您可以使用伪选择器 :visible 作为 is 方法中的参数，其中 returns 是一个布尔值。

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

Answer 2

样式已被 bootstrap 覆盖，您可以添加此

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

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

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

Set a class for a textbox on focus using Javascript

html

javascript

css

jquery

twitter-bootstrap