JavaScript表单事件处理方法详解

什么是表单事件

表单事件是指当用户与表单元素交互时，浏览器会触发一些事件以响应用户的行为。表单事件可以是用户输入、用户点击、用户提交表单等等。

常见的表单事件

以下是一些常见的表单事件：

• focus：当元素获得焦点时
• blur：当元素失去焦点时
• change：当元素值发生改变时
• keydown、keyup：按下或松开键盘上的按键时
• submit：当表单提交时

如何使用JavaScript处理表单事件

假设我们有以下HTML代码：

<form>
  <label for="name">名字：</label>
  <input type="text" id="name">
  <button type="submit">提交</button>
</form>

方法一：将JavaScript代码写在HTML中

在HTML中，我们可以在表单元素的属性中添加相应的JavaScript代码。

假设我们想在用户输入名称时，在控制台输出输入的内容，可以这样写：

<label for="name">名字：</label>
<input type="text" id="name" oninput="console.log(this.value)">

上述代码中的 oninput 事件表示当用户输入时，触发 console.log 方法来输出输入的内容。this.value 表示当前输入框的值。

方法二：使用JavaScript为表单元素添加事件监听

另一种处理表单事件的方法是使用 JavaScript 为表单元素添加事件监听器。

假设我们想在用户提交表单时，阻止表单的默认行为并在控制台输出输入的名称，可以这样写：

const form = document.querySelector('form');
const input = document.querySelector('#name');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认的提交行为
  console.log(input.value);
});

上述代码中，我们使用 addEventListener 为表单添加了 submit 事件监听器。event.preventDefault() 用于阻止表单的默认提交行为，防止浏览器跳转到新页面。input.value 表示当前输入框的值。

示例

示例一：输入框获取焦点

当输入框获取焦点时，给输入框添加一个样式。

<label for="name">名字：</label>
<input type="text" id="name">

const input = document.querySelector('#name');

input.addEventListener('focus', function() {
  input.style.border = '2px solid red';
});

上述代码中，当输入框获取焦点时，给输入框添加了一个 2px 红色边框。

示例二：监听表单提交

当用户提交表单时，阻止表单默认行为并在浏览器控制台输出表单的所有输入值。

<form>
  <label for="name">名字：</label>
  <input type="text" id="name">
  <button type="submit">提交</button>
</form>

const form = document.querySelector('form');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认的提交行为
  const inputs = form.querySelectorAll('input');
  for (let i = 0; i < inputs.length; i++) {
    console.log(inputs[i].value);
  }
});

上述代码中，当用户提交表单时，阻止了表单的默认行为并在浏览器控制台输出了所有输入框的值。我们使用了 querySelectorAll 方法来获取所有输入框，然后遍历每个输入框并输出其值。