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

Question

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

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

score 5 · Accepted Answer

看看 CSS:focus选择器。只需指定 CSS 类，如：

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

因为旧版浏览器（IE7 和其他浏览器）不支持它。你可能想用 JS 来做这件事。

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

wherefocused是这样定义的：

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

编辑：

Jquery.focus文档。

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

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

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

这会将焦点设置在选定元素上并运行先前附加的处理程序。更短的符号：

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

页面加载时元素自动聚焦的演示

score 1 · Accepted Answer

你所拥有的将聚焦元素。您可以根据需要使用:focusCSS 中的伪选择器来设置输入样式：

#txt1:focus {
    border: 1px solid #C00;
    background: #CCC;
}

score 0 · Accepted Answer

在这里你可以使用一些 CSS 来应用边框颜色、背景颜色。请参阅下面的css，当您专注于输入时会改变颜色

input:focus {
         font-family:Verdana, Geneva, sans-serif;
    border-color:#9ecaed;
    box-shadow:0 0 5px #9ecaed;
}

在聚焦后放置您想要突出显示的css属性。

3 回答 3