监听表单输入并做出反应

为了提升用户的交互体验，在表单中监听用户输入并做出实时反应是非常必要的。本文将介绍如何使用JavaScript添加事件监听器，捕获表单的输入事件，并对其进行相应的处理。

HTML表单

首先，我们需要一个简单的HTML表单作为演示。表单中包括一个输入框和一个提交按钮。

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

JavaScript代码

接下来，我们需要使用JavaScript代码对表单进行监听和处理。我们将使用addEventListener() 方法为输入框添加一个事件监听器来捕获用户的输入事件，并实时显示用户输入的内容。

const usernameInput = document.getElementById('username');

usernameInput.addEventListener('input', () => {
  console.log(usernameInput.value);
});

上面的代码创建了一个usernameInput变量，它引用了表单中的输入框，然后为其添加了一个事件监听器，当用户在输入框中输入内容时，监听器会触发，然后用console.log() 方法将内容打印到控制台。

防止用户误提交表单

除了实时显示用户输入的内容外，还可以使用preventDefault() 方法来防止用户误提交表单。通过添加一个submit事件监听器，捕获提交事件，然后使用preventDefault() 方法阻止表单提交。

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

form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('表单已阻止提交！');
});

上面的代码创建了一个变量form，它引用了表单元素，并为其添加了一个submit事件监听器。当用户尝试提交表单时，监听器会阻止表单提交，然后在控制台打印一条消息。

结论

在这篇文章中，我们学习了如何使用JavaScript监听表单输入事件并做出反应。除此之外，还学习了如何使用preventDefault() 方法防止表单的误提交。这些技能对于创建交互式的Web应用程序非常有用。