源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

HTML DOM onfocus

2026/01/01
11
0

学习目标

  • 理解 onfocus 事件的触发条件及其与 onblur 的关系

  • 掌握在 HTML 和 JavaScript 中绑定 onfocus 事件的三种方式

  • 能够利用 onfocus 实现输入高亮、提示显示、表单交互等用户体验优化

  • 了解其支持的元素范围及与 focusin 事件的区别

什么是 onfocus 事件

onfocus 是一个焦点获取事件，当用户通过点击、Tab 键导航或 JavaScript（如 .focus()）使某个元素获得焦点时触发。

常见可聚焦元素：

  • <input>（所有类型）

  • <textarea>

  • <select>

  • <button>

  • <a>（带有 href 属性）

  • 任何设置了 tabindex 属性的元素（如 <div tabindex="0">）

与 onblur 的关系

  • onfocus：元素获得焦点时触发

  • onblur：元素失去焦点时触发

  • 二者互为“镜像”，常配合使用实现完整交互逻辑

支持的 HTML 元素

onfocus 可用于所有可聚焦的 HTML 元素，但以下元素不支持（因其不可交互或不可聚焦）：

  • <base>

  • <bdo>

  • <br>

  • <head>

  • <html>

  • <iframe>

  • <meta>

  • <param>

  • <script>

  • <style>

  • <title>

提示：即使 <div> 默认不可聚焦，也可通过添加 tabindex="0" 使其支持 onfocus。

语法与绑定方式

1. 内联方式

<input type="text" onfocus="handleFocus(this)">

2. 属性赋值

element.onfocus = function() {
    handleFocus();
};

3. addEventListener()

element.addEventListener("focus", handleFocus);

注意：focus 事件不会冒泡，因此不能在父元素上监听子元素的聚焦行为。若需冒泡效果，请使用 focusin（IE 和现代浏览器支持）。

实战示例

输入框高亮

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>onfocus 内联示例</title>
    <style>
        body { text-align: center; padding: 40px; font-family: Arial; }
        h1 { color: green; }
        input { padding: 8px; margin: 10px; border: 1px solid #ccc; }
    </style>
</head>
<body>
    <h1>编程学习网</h1>
    <h2>HTML DOM onfocus 事件</h2>
    
    姓名：<input type="text" placeholder="点击我试试" 
                onfocus="this.style.background='lightgreen'">

    <script>
        // 无额外脚本
    </script>
</body>
</html>

效果：点击输入框，背景立即变为浅绿色。

动态样式修改

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>onfocus 属性绑定示例</title>
    <style>
        body { text-align: center; padding: 40px; }
        h1 { color: green; }
    </style>
</head>
<body>
    <h1>编程学习网</h1>
    <h2>onfocus 事件演示</h2>
    
    邮箱：<input type="email" id="emailInput" placeholder="请输入邮箱">

    <script>
        document.getElementById("emailInput").onfocus = function() {
            this.style.backgroundColor = "yellow";
            this.style.borderColor = "orange";
        };
    </script>
</body>
</html>

显示输入提示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>onfocus + addEventListener 示例</title>
    <style>
        body { text-align: center; padding: 40px; font-family: Arial; }
        h1 { color: green; }
        .hint { color: #666; font-size: 0.9em; margin-top: 5px; display: none; }
        input:focus + .hint { display: block; }
    </style>
</head>
<body>
    <h1>编程学习网</h1>
    <h2>聚焦时显示提示</h2>
    
    <input type="password" id="pwd" placeholder="设置密码">
    <p id="pwdHint" class="hint">密码应包含字母和数字，至少8位</p>

    <script>
        const input = document.getElementById("pwd");
        const hint = document.getElementById("pwdHint");

        input.addEventListener("focus", () => {
            hint.style.display = "block";
            input.style.boxShadow = "0 0 5px rgba(0,128,0,0.3)";
        });

        input.addEventListener("blur", () => {
            hint.style.display = "none";
            input.style.boxShadow = "none";
        });
    </script>
</body>
</html>

应用场景：密码规则提示、搜索建议入口、表单字段说明等。

应用场景

场景

说明

输入高亮

聚焦时改变边框 / 背景色，提升可访问性

动态提示

显示字段格式要求或帮助信息

自动选择内容

在金额 / 代码输入框中自动全选已有内容

初始化组件

聚焦时加载日期选择器、下拉建议等

无障碍优化

配合键盘导航，确保视觉反馈清晰

onfocus vs focusin

特性

focus (onfocus)

focusin

是否冒泡

❌ 不冒泡

✅ 冒泡

浏览器支持

所有浏览器

IE + 现代浏览器（Chrome/Firefox 也支持）

使用场景

直接监听元素聚焦

在父容器统一处理多个子元素的聚焦

// 若需监听多个输入框的聚焦，可用 focusin（更高效）
document.querySelector(".form-container").addEventListener("focusin", (e) => {
    if (e.target.matches("input")) {
        console.log("某个输入框获得焦点:", e.target.name);
    }
});

建议：除非需要冒泡，否则优先使用标准 focus 事件。

重点总结

  • onfocus 在元素获得焦点时触发，是提升表单交互体验的关键事件

  • 支持 <input>、<textarea>、<select>、<a> 等可聚焦元素

  • 三种绑定方式中，推荐使用 addEventListener("focus", ...)

  • 与 onblur 配合可实现完整的“进入 - 离开”交互逻辑

  • 不冒泡，若需冒泡行为可考虑 focusin（但非所有场景必需）

思考题

  1. 为什么在 <div> 上直接写 onfocus="..." 通常不会生效？如何让普通 <div> 支持聚焦？

  2. 如果用户使用鼠标快速连续点击多个输入框，onfocus 会如何触发？是否存在性能问题？

  3. 如何利用 onfocus 实现“首次聚焦时清空默认提示文字”的功能？请写出代码示例。