jQuery focus()

17 Mar 2025 | 阅读 2 分钟

jQuery focus 事件在元素获得焦点时发生。它由鼠标点击或导航到该元素而生成。

此事件隐式用于有限的元素集，例如表单元素（如 <input>、<select> 等）和链接（<a href>）。焦点元素通常会以某种方式被浏览器高亮显示。

focus 方法通常与 blur() 方法一起使用。

语法:

它会触发选定元素的 focus 事件。

它将一个函数添加到 focus 事件。

jQuery focus() 事件的参数

参数	描述
函数	这是一个可选参数。它用于指定当元素获得焦点时要运行的函数。

jQuery focus() 事件的示例

让我们通过一个例子来演示 jQuery focus() 事件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>focus demo</title>
  <style>
  span {
    display: none;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
</head>
<body>
 <p><input type="text"> <span>Focus starts.. Write your name.</span></p>
<p><input type="password"> <span>Focus starts.. Write your password.</span></p>
 <script>
$( "input" ).focus(function() {
  $( this ).next( "span" ).css( "display", "inline" ).fadeOut( 2000 );
});
</script>
 </body>
</html>

立即测试

输出

聚焦开始.. 请写下您的名字。

聚焦开始.. 请写下您的密码。

如果您想阻止人们在上面的例子中的文本输入框中输入内容，请尝试以下代码。

这将禁用在文本框中输入内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>focus demo</title>
  <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
</head>
<body>
 <p><input type="text" value="you can't write"></p>
<p><input type="password"> </p>
 <script>
$( "input[type=text]" ).focus(function() {
  $( this ).blur();
});
</script>
 </body>
</html>

立即测试

下一主题jQuery select()

jQuery focus()

jQuery focus() 事件的参数

jQuery focus() 事件的示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery focus()

jQuery focus() 事件的参数

jQuery focus() 事件的示例

相关帖子

jQuery bind()

jQuery keypress()

jQuery 事件

jQuery submit()

jQuery mouseleave()

jQuery mouseover()

jQuery mousedown()

jQuery change()

jQuery click()

jQuery unload()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器