.focus()

类别：事件 > 表单事件 | 表单

.focus( handler )返回类型：jQuery

描述：把一个事件处理函数绑定到“focus”JavaScript事件上，或者在一个元素上触发该事件。

  • 此方法在前两种变体中是.on( "focus", handler )的简写，在第三种变体中是.trigger( "focus" )的简写。
  • 当元素得到焦点时，focus事件被发送到该元素。此事件潜在地适用于有限的元素集合，譬如表单元素（<input>、<select>等等）和链接（<a href>）。在最近的浏览器版本中，此事件可以被扩展到包括所有的元素类型，只要显式地设置元素的tabindex属性。一个元素可以通过键盘命令获得焦点，譬如Tab键，或者利用鼠标在元素上点击来获得焦点。
  • 带有焦点的元素通常被浏览器以一些方式突出显示，例如，用虚线包围元素。焦点用来确定哪个元素优先接收键盘相关的事件。

尝试把焦点设置到一个隐藏元素上，会导致Internet Explorer中的错误。请注意，只能在可见的元素上使用.focus()方法。若要运行一个元素的焦点事件处理函数，而不对元素设置焦点，请使用.triggerHandler( "focus" )，而不是使用.focus()。

例如：考虑以下HTML：

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

事件处理函数可以绑定到第一个输入字段：

1
2
3
 
$( "#target" ).focus(function() {
  alert( "Handler for .focus() called." );
});

现在点击第一个字段，或者从别的字段轻触它，显示警告框：

Handler for .focus() called.

我们可以在别的元素被点击时触发此事件：

1
2
3
 
$( "#other" ).click(function() {
  $( "#target" ).focus();
});

此代码执行之后，点击Trigger the handler也将弹出警告消息。

focus事件在Internet Explorer中并不冒泡。因此，依赖于利用focus事件的委托的脚本将不会跨浏览器一致性工作。然而，自从jQuery 1.4.2以来jQuery通过在它的事件委托方法中，把focus事件映射到focusin事件来变通地解决了这个限制。

补充说明：

  • 因为.focus()方法是.on( "focus", handler )方法的简写，所以可以使用.off( "focus" )来分离它。

示例：

引发焦点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>focus demo</title>
  <style>
  span {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示：

若要阻止人们在文本框中输入内容，请尝试：

1
2
3
 
$( "input[type=text]" ).focus(function() {
  $( this ).blur();
});

若要在网页启动时使一个带有id为“login”的登录输入框获得焦点，请尝试：

1
2
3
 
$( document ).ready(function() {
  $( "#login" ).focus();
});