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 docs。

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

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

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

这个将重点放在所选元素上并运行先前附加的处理程序。更短的符号：

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

Demo在页面加载时自动执行元素

Answer 2

你所拥有的将集中于元素。您可以使用CSS中的:focus伪选择器根据需要设置输入样式：

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

Answer 3

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

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

将焦点放在css属性中，无论你想要突出显示它们。

聚焦并突出显示输入控件

3 个答案: