JavaScript：Ctrl+V粘贴后提交表单但输入框值为空的修复请求

问题根源 #

你的代码仅在Ctrl+V触发时聚焦输入框并立即提交，但系统默认的粘贴动作还未完成，且未主动读取剪贴板内容写入输入框，导致提交时输入框为空。

修复方案 #

使用浏览器Clipboard API主动读取剪贴板内容，写入输入框后再提交表单，同时阻止默认粘贴事件避免冲突：

document.addEventListener('keydown', async function(event) {
  if (event.ctrlKey && event.key === 'v') { // 用key替代keyCode，兼容性更好、语义更清晰
    // 阻止系统默认粘贴行为，避免重复处理
    event.preventDefault();
    
    const inputBox = document.getElementById('box');
    inputBox.focus();
    
    try {
      // 异步读取剪贴板文本内容
      const clipboardText = await navigator.clipboard.readText();
      // 将剪贴板内容写入输入框
      inputBox.value = clipboardText;
      // 提交表单
      document.getElementById('button').click();
    } catch (err) {
      console.error('读取剪贴板失败:', err);
    }
  }
});

关键说明 #

• 用async/await处理剪贴板读取的异步逻辑，确保内容读取完成后再提交表单
• 调用event.preventDefault()避免系统默认粘贴动作和自定义逻辑冲突
• 增加错误捕获，处理用户拒绝剪贴板权限等异常情况

HTML部分无需修改：

<form>
  <input id='box' name='variable'>
  <input id='button' type='submit'>
</form>

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