输入框填写后自动提交表单，不需点击按钮，行云流水！

2023-12-04 16:16:45

自动填写表单：使用 JavaScript 简化您的任务

在现代 Web 开发中，我们经常需要处理繁琐的表单填写任务。无论是注册信息、登录凭据还是地址详细信息，手动输入这些数据既耗时又容易出错。

为了解决这个问题，JavaScript 提供了强大的功能来实现自动表单填写 ，让我们能够自动化填写过程，节省时间并提高效率。本文将深入探讨如何在 JavaScript 中使用各种技术来自动输入表单。

自动触发输入事件

传统的方法是使用 document.querySelector() 获取输入字段，然后使用 .value 属性设置其值。然而，这种方法无法触发表单的提交。

使用 dispatchEvent() 方法，我们可以向输入字段发送 input 事件 ，就像用户实际正在输入一样。这将触发表单提交。

// 获取输入字段
const input = document.querySelector('input');

// 创建键盘事件对象
const event = new KeyboardEvent('input', {
  bubbles: true,
  cancelable: true,
  data: 'test'
});

// 发送键盘事件
input.dispatchEvent(event);

模拟用户输入

除了触发输入事件，我们还可以使用 JavaScript 模拟用户输入。使用 setInterval() 方法，我们可以定期向输入字段发送键盘事件，模拟用户正在输入。

// 获取输入字段
const input = document.querySelector('input');

// 创建定时器，每 100 毫秒发送一次键盘事件
const interval = setInterval(() => {
  // 创建键盘事件对象
  const event = new KeyboardEvent('input', {
    bubbles: true,
    cancelable: true,
    data: 't'
  });

  // 发送键盘事件
  input.dispatchEvent(event);
}, 100);

// 当用户单击停止按钮时，清除定时器
document.querySelector('button').addEventListener('click', () => {
  clearInterval(interval);
});