JavaScript 表单事件

在处理用户表单输入时，必然需要用到表单事件。在 JavaScript 中，常用的表单事件如下表所示。

JavaScript 表单事件
事件	说明
focus	“获取焦点” 时触发
blur	“失去焦点” 时触发
input	“输入内容” 时触发
change	“值改变” 时触发
select	“选中文本框内容” 时触发
submit	“表单提交” 时触发

JavaScript focus 和 blur 事件

在 JavaScript 中，focus 表示获取焦点时触发的事件，而 blur 表示失去焦点时触发的事件，两者是相反操作。

focus 和 blur 这两个事件往往都是配合一起使用的。例如用户准备在文本框中输入内容时，此时它会获得光标，然后就会触发 focus 事件。当文本框失去光标时，然后就会触发 blur 事件。

并不是所有的 HTML 元素都有焦点事件，具有 “获取焦点” 和 “失去焦点” 特点的元素有以下几种：

表单元素（按钮、单选按钮、复选框、单行文本框、多行文本域、下拉列表等）。
超链接。
其他元素，比如 summary、iframe、area 等。

判断一个元素是否具有焦点很简单，我们打开一个页面后按 Tab 键，能够选中的就是具有焦点特性的元素。

提示: 我们可以为任何一个 HTML 元素添加 tabindex 属性，来使其变得可聚焦。

示例 1：focus 和 blur 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input id="txt" type="text">
    <script>
        const oTxt = document.getElementById("txt");

        oTxt.addEventListener("focus", function() {
            this.style.backgroundColor = "yellow"; // 背景变成黄色
        });

        oTxt.addEventListener("blur", function() {
            this.style.backgroundColor = "white"; // 背景变成白色
        });
    </script>
</body>
</html>

当输入内容（获取焦点）时，页面效果如下图 1 所示。当输完内容（并失去焦点）时，页面效果如下图 2 所示。

JavaScript focus 事件效果

JavaScript blur 事件效果

分析：

这个例子实现的效果是：当文本框获得焦点时，将其背景颜色改为 “黄色”。然后当文本框失去焦点时，将其背景颜色改为 “白色”。

示例 2：使用 focus() 自动获取焦点

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input id="txt" type="text">
    <script>
        const oTxt = document.getElementById("txt");
        oTxt.focus();
    </script>
</body>
</html>

运行结果如下图所示：

JavaScript focus() 方法示例

分析：

默认情况下，文本框是不会自动获取焦点的，而必须点击文本框才会获取。但是我们经常可以看到很多页面在一打开的时候，文本框就已经自动获取到了焦点，此时使用一个 focus() 方法就可以轻松实现了

focus() 方法跟 focus 事件是不一样的。focus() 是 DOM 对象的一个方法，仅仅用于让元素获取焦点。而 focus 是一个事件，它是用于事件操作的。

JavaScript input 事件

在 JavaScript 中，当我们在输入框中输入一个字符、删除一个字符、粘贴文本，或者拖动了滑块等，都会触发 input 事件。

input 事件最主要的特点是它的 “实时性” 。很多网站（比如淘宝、京东等）都会有 “即时搜索” 的功能：当输入第一个字母时，搜索结果就开始变化了，这背后其实就是 input 事件在工作。

input 事件主要用于以下场景：

即时搜索：用户每输入一个字，立即更新搜索结果列表。
统计字符：在用户输入时，实时显示他们已经输入了多少字（例如，发微博或评论时）。
实时校验：用户输入密码时，实时显示密码强度。
实时预览：拖动滑块（如音量或颜色选择器）时，立即看到效果变化。

示例 3：input 实现实时统计字符数

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <textarea id="txt"></textarea>
    <p>字符个数：<span id="num">0</span></p>
    <script>
        const oTxt = document.getElementById("txt");
        const oNum = document.getElementById("num");

        oTxt.addEventListener("input", function() {
            oNum.textContent = oTxt.value.length;
        });
    </script>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当输入内容后，页面效果如下图 2 所示。

JavaScript input 事件示例效果（1）

JavaScript input 事件示例效果（2）

JavaScript change 事件

在 JavaScript 中，change 事件会在以下几种情况下触发：

文本框输入内容后，并且该元素失去焦点时，如果输入的值与上次获得焦点时相比发生了变化，就会触发。
单选按钮选择某一项时触发。
复选框选择某一项时触发。
下拉列表选择某一项时触发。

示例 4： “文本框” 触发 change 事件

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input type="text" id="txt" placeholder="昵称（至少 5 个字符）">
    <p id="msg"></p>
    <script>
        const input = document.getElementById("txt");
        const msg = document.getElementById("msg");

        // 监听 change 事件
        input.addEventListener("change", function() {
            const value = this.value;
            
            // 只有当用户输入完并失去焦点时，才会进行校验
            if (value.length < 5) {
                msg.textContent = "昵称太短了，要求至少 5 个字符";
                msg.style.color = "red";
            } else {
                msg.textContent = "校验通过！";
                msg.style.color = "green";
            }
        });
    </script>
</body>
</html>

默认情况下，页面效果如下图 1 所示。当输入内容后，页面效果如下图 2 所示。

“文本框” 触发change事件（1）

“文本框” 触发change事件（2）

分析：

这里我们使用 change 事件来使得当用户输入完内容后，并且失去焦点时，我们才会去检查是否符合要求。

对于这个例子来说，小伙伴们可以把 change 改为 input，然后对比一下两者之间的区别。

示例 5： “下拉列表” 触发 change 事件

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        window.onload = function () {
            const oSelect = document.getElementById("countrySelect");
            const oResult = document.getElementById("result");

            oSelect.addEventListener("change", function() {
                const selectedValue = this.value; 
                
                // 如果 value 不为空
                if (selectedValue) {
                    oResult.textContent = selectedValue;
                } else {
                    oResult.textContent = "尚未选择";
                }
            });
        }
    </script>
</head>
<body>
    <select id="countrySelect">
        <option value="">-- 请选择国家 --</option>
        <option value="China">中国</option>
        <option value="USA">美国</option>
        <option value="Russia">俄国</option>
        <option value="England">英国</option>
        <option value="French">法国</option>
    </select>
    <p>您选择的是: <span id="result"></span></p>
</body>
</html>

页面效果如下图所示。

“下拉列表” 触发 change 事件

分析：

对于 select 元素来说，只要选择了下拉列表的任意一项，就会触发 change 事件。

JavaScript select 事件

在 JavaScript 中，当我们选中 “单行文本框” 或 “多行文本域” 中的内容时，就会触发 select 事件。

需要注意的是，很多初学的小伙伴以为 select 事件是从一个 “下拉列表（select）” 中选择其中一项时触发的，其实这个理解是错误的。

select 事件只适用于以下 2 种元素：

<input type="text">（文本输入框）。
<textarea>（多行文本域）。

select 事件在实际开发中很少见，它主要用于需要对用户选中的文本进行处理的场景，例如：

富文本编辑器：监控用户选中文本的动作，以便提供 “加粗”、“斜体” 等格式化按钮。
复制 / 剪切提示：在用户选中一段文本时，提示他们可以复制，或者进行特殊处理。

示例 6：select 事件的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input id="txt1" type="text" value="如果我真的存在，也是因为你需要我。"/><br>
    <textarea id="txt2" cols="20" rows="5">如果我真的存在，也是因为你需要我。</textarea>
    <script>
        const oTxt1 = document.getElementById("txt1");
        const oTxt2 = document.getElementById("txt2");

        oTxt1.addEventListener("select", function() {
            alert("你选中了单行文本框中的内容！");
        });

        oTxt2.addEventListener("select", function() {
            alert("你选中了多行文本域中的内容！");
        });
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript select 事件示例

分析：

当我们选中单行文本框或多行文本域中的内容时，都会弹出对应的对话框。select 事件在实际开发中用得极少，小伙伴们了解一下就行，不需要过多深入。

示例 7：select() 方法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <input id="search" type="text" value="搜索绿叶网">
    <script>
        const oSearch = document.getElementById("search");
        oSearch.select();
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript select() 方法示例

分析：

select() 跟 select 是不一样的。select() 是一个 DOM 对象的方法，仅仅用于全选文本。而 select 是一个事件，它是用于事件操作的。select() 和 select 的关系，跟 focus() 和 focus 的关系是相似的。

JavaScript submit 事件

在 JavaScript 中，当我们尝试提交表单时，就会触发 submit 事件。特别注意的是：submit 事件是绑定到 form 元素上的，而不是表单内部的按钮上。

如果我们为 form 元素绑定 submit 事件，那么以下情况会触发：

点击提交按钮：点击 <input type="submit"> 或 <button type="submit">，只限这两种按钮。
按下 Enter 键：当焦点位于表单的任何文本输入字段中时，按下 Enter 键会触发。

当 submit 事件被触发后，浏览器会执行以下操作：

收集所在表单所有输入框的数据。
将这些数据发送到服务器。
刷新页面，或跳转页面。

示例 8：submit 事件的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <form id="myForm">
        <p>
            <label for="name">姓名：</label>
            <input type="text" id="name">
        </p>
        <p>
            <button type="submit">提交</button>
        </p>
    </form>
    <p id="message"></p>
    <script>
        // 1. 获取 form 元素（注意：submit事件是绑定在 form 上的）
        const oForm = document.getElementById("myForm");
        const oName = document.getElementById("name");
        const oMessage = document.getElementById("message");

        // 2. 监听 submit 事件
        oForm.addEventListener("submit", function(e) {
            
            // 阻止浏览器的默认提交行为
            e.preventDefault();
            const nameValue = oName.value.trim();

            if (nameValue === "") {
                // 校验失败，则提示错误
                oMessage.textContent = "姓名不能为空！";
                oMessage.style.color = "red";
            } else {
                // 校验成功，则提交数据（模拟 Ajax）
                console.log("发送数据:", { name: nameValue });
                
                oMessage.textContent = `表单已成功处理！接收到姓名: ${nameValue}`;
                oMessage.style.color = "green";
            }
        });
    </script>
</body>
</html>

页面效果如下图所示。

JavaScript submit 事件示例

分析：

特别注意，submit 事件只能用于 form 元素。然后当我们点击【提交】按钮或在输入框内按 Enter 键时，就会触发 submit 事件。

其中，e.preventDefault() 用于阻止浏览器的默认提交行为，也就是阻止页面刷新或跳转。为了在后台处理数据而不刷新页面，我们必须使用 e.preventDefault()。对于 e.preventDefault() 的详细用法，我们在后面 “JavaScript event 对象” 一节中会详细介绍。