Tampermonkey脚本填充工时表单提交后内容清空，求解决方案

直接修改input的value属性只会改变DOM表面显示的值，但很多现代前端框架（比如React、Vue）是通过事件监听来维护内部表单状态的。你没触发对应的输入事件，框架就不知道值已经更新，提交时会认为表单是空的，导致内容清空且无提交动作。

解决步骤 #

1. 设置input的value后，手动触发input或change事件，让框架感知到值的变化
2. 如果表单是动态加载的，需要延迟执行脚本确保元素已存在

修改后的脚本 #

// ==UserScript==
// @name         Fill the timesheet
// @namespace    
// @version      0.1
// @description  
// @author       
// @match        https://timesheet.employer.com/employees/timesheet/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @run-at       document-end
// ==/UserScript==

// 封装触发事件的工具函数
function triggerEvent(element, eventName) {
    const event = new Event(eventName, { bubbles: true, cancelable: true });
    element.dispatchEvent(event);
}

// 延迟执行确保表单元素加载完成
setTimeout(() => {
    const days = document.getElementsByClassName('timesheet_days');
    
    for (let i = 0; i < days.length; i++) {
        const day = days[i];
        const box = day.getElementsByClassName("Timesheet__input")[0];
        
        if (box) {
            box.value = "8h 00m";
            // 先尝试触发input事件，大部分框架会监听这个
            triggerEvent(box, 'input');
            // 如果input事件无效，注释掉上面一行，打开下面这行试试change事件
            // triggerEvent(box, 'change');
        }
    }
}, 1000);

补充说明 #

• 如果延迟1秒还是没效果，可以调整延迟时间（比如2000），或者用MutationObserver监听元素的加载（适合更复杂的动态页面）
• 不同网站监听的事件可能不同，input事件是实时输入时触发的，change是失去焦点时触发的，按需切换

内容的提问来源于stack exchange，提问作者0xDEADBEEF