如何仅通过触发键盘事件向input标签输入文本，不直接设置value属性

我们可以通过触发完整的键盘输入事件流来实现等效真实用户输入的效果，完全不需要直接修改value属性，绑定在输入框上的各类键盘、输入监听事件都能正常触发。

纯JavaScript实现 #

function simulateKeyboardInput(inputElement, inputText) {
    // 先聚焦输入框，符合真实输入逻辑
    inputElement.focus();
    
    // 逐个字符输入，模拟真实敲击键盘的流程
    for (let char of inputText) {
        const keyCode = char.charCodeAt(0);
        
        // 触发keydown事件
        const keydownEvent = new KeyboardEvent('keydown', {
            key: char,
            code: `Key${char.toUpperCase()}`,
            keyCode: keyCode,
            which: keyCode,
            bubbles: true
        });
        inputElement.dispatchEvent(keydownEvent);
        
        // 触发keypress事件
        const keypressEvent = new KeyboardEvent('keypress', {
            key: char,
            code: `Key${char.toUpperCase()}`,
            keyCode: keyCode,
            which: keyCode,
            bubbles: true
        });
        inputElement.dispatchEvent(keypressEvent);
        
        // 处理光标位置，插入字符（模拟输入的内容写入逻辑）
        const start = inputElement.selectionStart;
        const end = inputElement.selectionEnd;
        const value = inputElement.value;
        inputElement.value = value.substring(0, start) + char + value.substring(end);
        // 光标后移一位
        inputElement.selectionStart = inputElement.selectionEnd = start + 1;
        
        // 触发input事件
        const inputEvent = new InputEvent('input', {
            inputType: 'insertText',
            data: char,
            bubbles: true
        });
        inputElement.dispatchEvent(inputEvent);
        
        // 触发keyup事件
        const keyupEvent = new KeyboardEvent('keyup', {
            key: char,
            code: `Key${char.toUpperCase()}`,
            keyCode: keyCode,
            which: keyCode,
            bubbles: true
        });
        inputElement.dispatchEvent(keyupEvent);
    }
}

使用示例 #

// 选中目标input元素
const targetInput = document.querySelector('#your-input-id');
// 输入指定文本
simulateKeyboardInput(targetInput, '需要输入的测试文本');

jQuery实现方案 #

如果项目中使用jQuery，可以直接调用内置的事件触发方法简化实现：

function simulateInputWithJquery($input, text) {
    $input.focus();
    for (let char of text) {
        const keyCode = char.charCodeAt(0);
        // 依次触发各类键盘输入事件
        $input.trigger($.Event('keydown', { keyCode: keyCode, which: keyCode, key: char }));
        $input.trigger($.Event('keypress', { keyCode: keyCode, which: keyCode, key: char }));
        
        // 写入字符并调整光标
        const start = $input[0].selectionStart;
        const end = $input[0].selectionEnd;
        const val = $input.val();
        $input.val(val.substring(0, start) + char + val.substring(end));
        $input[0].selectionStart = $input[0].selectionEnd = start + 1;
        
        $input.trigger('input');
        $input.trigger($.Event('keyup', { keyCode: keyCode, which: keyCode, key: char }));
    }
}

使用示例 #

simulateInputWithJquery($('#your-input-id'), '需要输入的测试文本');

注意事项 #

• 该实现完全模拟真实用户的键盘输入流程，所有绑定在输入框上的keydown、keypress、input、keyup事件都会正常触发
• 仅在用户交互上下文（例如点击、键盘事件回调中）执行不会有浏览器安全限制，若页面加载后自动执行可能被部分浏览器的安全策略拦截
• 支持输入框选中部分文本后替换、光标在中间插入等场景，和真实输入行为完全一致

内容的提问来源于stack exchange，提问作者Sina gholami