聚焦并突出显示输入控件

Question

当页面加载时，我想聚焦并突出显示（边框颜色或背景颜色更改）一个输入控件。我该怎么做？以下是我目前的代码。

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

- KayKay

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();

示例：页面加载时自动聚焦于元素。

- Viktor S.

---

或者做一些更通用的事情，比如 input[type="text"]:focus { border:#ff000; }，对于任何获得焦点的文本框都适用。 - Mark Pieszak - Trilon.io

你的回答看起来很有前途。我会在两分钟内回来。 - KayKay

好的。试试这个链接：http://jsfiddle.net/WEqZp/3/ :) 你期望在加载后立即被高亮，因为有这一行代码：$("#txt2").focus(function(){ $(this).addClass("focused")});，但它只是绑定了一个焦点事件处理函数。要运行它并设置焦点，你必须在添加事件处理程序后调用这段代码：$("#txt2").focus();。就像在我的最新演示中一样。 - Viktor S.

谢谢FAngel的解释，确实帮助了我！ - KayKay

感谢jQuery，让你只需编写“那么多”代码。您可以通过创建一些命名函数来缩短该行，这些函数将设置“focused”类。例如，像这样：http://jsfiddle.net/WEqZp/5/。如果您有几个字段，则可以使用类选择器而不是ID选择器，并且不必为每个元素重复编写该代码。 - Viktor S.

Answer 2

您所拥有的将会聚焦于该元素。您可以在CSS中使用:focus伪选择器来根据需要对输入框进行样式设置：

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

- Rory McCrossan

---

正如FAngel所说，它在IE7上无法工作。另外，当用户移动到不同的文本框时如何删除焦点。 - KayKay

你是对的，在IE7中它不起作用，FAngel的答案包括了一个解决方法。至于在失去焦点时删除效果，由于:focus选择器，浏览器会为您处理这个问题。 - Rory McCrossan

它确实有问题，但边框的CSS是错误的，请尝试这个：http://jsfiddle.net/WEqZp/1/ - Rory McCrossan

我的原始需求是当页面加载时，我想要聚焦并突出显示（边框颜色或背景颜色更改）一个输入控件。该演示未在加载时聚焦文本框。 - KayKay

你需要在元素上调用 focus() 方法：http://jsfiddle.net/WEqZp/4/ - Rory McCrossan

Answer 3

在这里，您可以使用一些CSS来应用边框颜色、背景颜色。请参考以下CSS，当您聚焦于输入时，将更改颜色。

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

在聚焦后，将想要突出显示的CSS属性放置在其中。

- Bhushan Kawadkar