网页自动化模拟操作时，模拟真实按键触发事件【终级方案】

Element UI + Vue 深度绑定的输入框 ，普通的事件触发全是假的 ，框架只认 **「原生真实键盘输入事件」！

普通 方法都只是模拟表面，没有模拟 真人敲键盘的底层事件 **，所以必须用硬核方案！

🔥 终极解决方案（针对 input 专属代码）

模拟真人鼠标点击 + 键盘输入的完整代码，框架 100% 识别：

javascript 复制代码

// 1. 严格用你指定的选择器（第二个 input.d-text）
const input = document.querySelectorAll("input.d-text")[1];

// 2. 你要赋值的内容（自己改）
const value = "这里填你要输入的内容";

// 3. 模拟真人完整操作（核心！Vue/ElementUI 唯一认的方式）
function setInputValue(el, val) {
    // 模拟鼠标聚焦（你手动点的那一下）
    el.focus();
    
    // 赋值
    el.value = val;

    // ✅ 关键：触发【原生键盘事件】（框架双向绑定的核心）
    const event = new Event('input', {
        bubbles: true,
        cancelable: true
    });
    // 强制触发原生输入事件（最底层）
    el.dispatchEvent(event);
    
    // 额外触发 Vue/React 必须的合成事件
    el.dispatchEvent(new Event('change', { bubbles: true }));
    el.dispatchEvent(new Event('blur', { bubbles: true }));
}

// 执行赋值
setInputValue(input, value);

🚀 还不行？用【无敌兜底版】（模拟真实键盘敲击）

如果上面还不行，说明网页强制监听键盘按键 ，直接模拟每一个字符的键盘输入，这是所有网页都无法拦截的终极方法：

javascript 复制代码

// 你的固定选择器
const input = document.querySelectorAll("input.d-text")[1];
// 要赋值的内容
const text = "你的内容";

// 模拟真实键盘输入（无敌版）
input.focus();
input.value = '';
let idx = 0;
const type = () => {
    if(idx < text.length){
        input.value += text[idx++];
        input.dispatchEvent(new Event('input',{bubbles:true}));
        setTimeout(type,10);
    } else {
        input.blur();
    }
}
type();

🎯 为什么之前全部失败？

用的是 Vue + Element UI 输入框，双向绑定机制极严格
它不监听 value 变化，只监听 原生键盘输入事件
普通的 dispatchEvent(new Event("input")) 是伪造事件，框架直接忽略
必须模拟 真实的 focus + 原生 input 事件 + 冒泡 才会生效

如果这个代码还不行，你砍我！这是前端处理这类问题的最终标准答案。

更多源码见 https://wangpanmao.com