繁忙时代下表单数据填写难题，JavaScript 自动填充来解决

javascript

2024-03-15 02:37:39

使用JavaScript为表单字段自动填充参数

引言

在繁忙的现代世界中，我们常常需要快速有效地完成任务。在网页表格中输入大量数据可能会耗时且容易出错。本文将介绍一种使用JavaScript自动填充表单字段中特定参数的方法，从而简化并加速此过程。

问题：手动输入数据的繁琐和错误

当我们填写涉及大量字段的网页表格时，手动输入所有必要的数据可能会成为一项乏味且容易出错的任务。这不仅浪费时间，而且还可能导致提交不完整或错误的数据，从而造成延迟和挫折。

解决方法：使用JavaScript自动填充

JavaScript是一种功能强大的编程语言，可用于创建交互式网页。通过使用JavaScript，我们可以创建脚本，这些脚本可以自动执行任务，例如在表单字段中填充特定参数。

实现：

设置一个延迟： 为了确保页面完全加载，我们设置了一个2秒的延迟，然后在该延迟后运行我们的脚本。
标识需要填充的字段： 我们使用getElementByClassName()方法标识类名为"el-table_1_column_4 is-center"的表单字段，这些字段包含我们需要填充的参数。
循环遍历字段并填充参数： 使用forEach()方法，我们循环遍历每个识别的字段。对于每个字段，我们找到其对应的输入字段并使用value属性设置其值。
触发输入事件： 为了触发表单验证，我们需要触发输入字段上的"输入"事件。我们使用dispatchEvent()方法来做到这一点。

代码段：

(function() {
    'use strict';
    setTimeout(() => {
        console.log('auto fill variable params');
        const arr = ['bizId','tenantId','mid','custId'];
        const params = Array.from(document.getElementsByClassName("el-table_1_column_4 is-center")).filter(element => element.classList.length===2);
        params.forEach(p =>{
            const input = p.getElementsByClassName("el-input__inner")[0];
            // trigger `input` event
            input.value = arr.shift();
            input.dispatchEvent(new Event('input', { bubbles: true }));
        });
    }, 2000);
})();