如何用JS修复粘贴助记词后输入框文本重复问题？

问题描述 #

我希望将24词助记词粘贴到24个空白输入框中的任意一个，实现每个输入框分配一个单词。目前功能可运行，但用于粘贴的目标输入框会出现文本重复（例如预期显示"inhale"，实际显示"inhaleinhale piece click logic uncle over surge oyster accident coral logic harsh crater avoid spread exchange brown rabbit feed scale wrestle pepper affair memory"），请问如何修复该问题？

当前代码 #

JavaScript 逻辑 #

const inputs = document.getElementsByTagName('input');

useEffect(() => {
  const handlePasteAnywhere = event => {
    mnemonics = event.clipboardData.getData('text').split(' ');
    
    if(mnemonics.length >= 24){
      let j = 0;
      mnemonics.map(function(i){
        if(j < 24){
          inputs[j].value = i;
        }
        j++;
      })
    }
  };

  window.addEventListener('paste', handlePasteAnywhere);

  return () => {
    window.removeEventListener('paste', handlePasteAnywhere);
  };
}, []);

JSX 渲染 #

mnemonics.map((i) => (
  <Form.Control
    className="mnemonic"
    name="mnemonic"
    type="text"
    onPaste={handlePaste}
  />
))

示例助记词（中文翻译） #

吸气 碎片 点击 逻辑 叔叔 越过 激增 牡蛎 事故 珊瑚 逻辑 严酷 陨石坑 避免 传播 交换 棕色 兔子 饲料 鳞片 摔跤 胡椒 事件 记忆

修复方案 #

问题根源是双重粘贴触发：同时给window绑定了paste事件，又给每个输入框绑定onPaste，且未阻止默认粘贴行为。粘贴时，输入框默认行为会把剪贴板内容直接插入自身，同时window的paste事件执行分配逻辑，导致目标输入框既有完整粘贴内容，又被赋值第一个单词，最终重复。

修复步骤：

1. 移除输入框上多余的onPaste绑定
2. 在window的paste事件处理函数中调用event.preventDefault()，阻止默认粘贴行为
3. 优化助记词分割逻辑，兼容多空格场景，只处理前24个单词

修复后的代码：

JavaScript 逻辑 #

const inputs = document.getElementsByTagName('input');

useEffect(() => {
  const handlePasteAnywhere = event => {
    // 阻止默认粘贴行为，避免内容插入目标输入框
    event.preventDefault();
    
    const pastedText = event.clipboardData.getData('text');
    // 用正则分割，兼容多个空格或换行的情况
    const mnemonicList = pastedText.trim().split(/\s+/);
    
    if(mnemonicList.length >= 24){
      // 直接遍历前24个单词，避免多余循环
      for(let j = 0; j < 24; j++){
        if(inputs[j]){
          inputs[j].value = mnemonicList[j];
        }
      }
    }
  };

  window.addEventListener('paste', handlePasteAnywhere);

  return () => {
    window.removeEventListener('paste', handlePasteAnywhere);
  };
}, []);

JSX 渲染 #

mnemonics.map((_, index) => (
  <Form.Control
    key={index} // 添加key属性，符合React列表渲染规范
    className="mnemonic"
    name="mnemonic"
    type="text"
  />
))

额外优化：

• 用trim()处理剪贴板文本，去除首尾空白字符
• 正则/\s+/分割，避免多空格导致的空元素
• 改用for循环替代map，更高效（无需返回值）

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