返回值:jQueryfocus(handler(eventObject))

为 JavaScript 的 "focus" 事件绑定一个处理函数,或者触发元素上的该事件。

  • 带有参数的该方法是 .bind('focus', handler) 的快捷方式,不带参数的该方法是 .trigger('focus') in the third.
  • 当元素获得焦点时,就会触发 focus 事件。虽然此事件起初只能应用于有限的元素上,例如,表单元素(<input>, <select>, 等。) 和链接 (<a href>),但是在最近的浏览器版本中,除了上述元素外,该事件的应用范围被扩大到任何元素,只要这个元素指定了 tabindex 属性(上述元素不需要指定此属性)。元素可以通过键盘命令来获得焦点,例如 Tab 键,或在元素上点击了鼠标。
  • 当元素获得焦点时,浏览器一般会以某种高亮方式来显示,例如,在元素周围显示点线。该事件通常用于判断哪个元素是最先接收键盘相关事件的元素。

在 IE 中,如果尝试将焦点设置到 hidden 元素上的话,会导致出错。需要注意的是,只能对可见元素使用 .focus()。若要执行元素上的 focus 事件却又不想让该元素获得焦点的话,请使用 .triggerHandler("focus") 来代替 .focus()

举例来说,请看下面的HTML:

<form>
  <input id="target" type="text" value="Field 1" />
  <input type="text" value="Field 2" />
</form>
<div id="other">
  Trigger the handler
</div>

可以将该事件绑定在第一个 input 元素上:

$('#target').focus(function() {
  alert('Handler for .focus() called.');
});

现在,点击第一个文本框或使用 Tab 键移动到该元素上时,会显示一个提示框:

Handler for .focus() called.

我们也可以在点击其它元素时,触发该事件:

$('#other').click(function() {
  $('#target').focus();
});

在代码执行后,如果你点击 Trigger the handler 将同样会弹出上面的消息。

focus 事件在 IE 中不会引发事件冒泡。因此,当脚本依赖于 focus 事件代理时,在跨浏览器的情况下,该脚本可能无法正常工作。然而,从 1.4.2 版本开始,jQuery 通过将 focus 事件映射到 focusin 事件的方法,绕过了这个限制,从而可以在 .live() .delegate() 事件代理中使用该方法,解决了跨浏览器的问题。

示例:

触发 focus 事件的例子。

<!DOCTYPE html>
<html>
<head>
<style>span {display:none;}</style>
<script src="jquery.min.js"></script>
</head>
<body>

<p><input type="text" /> <span>focus fire</span></p>

<p><input type="password" /> <span>focus fire</span></p>

<script>


    $("input").focus(function () {
         $(this).next("span").css('display','inline').fadeOut(1000);
    });


</script>
</body>
</html>

演示:

示例:

阻止用户在文本框中写任何内容:

jQuery 代码:
$("input[type=text]").focus(function(){
  $(this).blur();
});

示例:

在页面显示时,将焦点移到 id 为 'login' 的 input 元素上:

jQuery 代码:
$(document).ready(function(){
  $("#login").focus();
});