聚焦并突出显示输入控件

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

上面的行只是将处理程序绑定到焦点事件,并且不会更改焦点或立即执行它.为了使一个焦点集中在页面加载上的字段,应该在那个之后添加另一行:

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

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

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

在页面加载时自动执行元素的演示