jquery - 聚焦并突出显示输入控件

Question

当页面加载时，我想聚焦并突出显示(边框颜色或背景颜色更改)输入控件。我该怎么做？这就是我到目前为止所得到的。

<script type="text/javascript">
    $(function () {
        $("#txt1").focus();            
    });
</script>

Answer 1

看看 CSS :focus选择器。只需指定 CSS 类即可:

#txt1:focus {
    border-color:red;
}

因为旧版浏览器(IE7 及其他一些浏览器)不支持它。您可能想用 JS 来做到这一点。

$("#txt1").focus(function(){ $(this).addClass("focused")});
$("#txt1").blur(function(){ $(this).removeClass("focused")});    

其中focused定义如下:

#txt1.focused {
   border-color:red;
}

编辑:

Jquery.focus文档。

$("#txt1").focus(function(){ $(this).addClass("focused")});

上面的行只是将处理程序绑定(bind)到焦点事件，并且不会更改焦点或立即执行它。为了使字段专注于页面加载，应在该行之后添加另一行:

$("#txt1").focus();

这将把焦点设置在选定的元素上并运行之前附加的处理程序。较短的符号:

$("#txt1").focus(function(){ $(this).addClass("focused")}).focus();

Demo页面加载时元素自动融合