JavaScript编码器复制剪贴板触发DOMException错误求助

错误原因 #

你遇到的INDEX_SIZE_ERR有两个核心诱因：

1. 编码逻辑数组越界：当原字符处于字母表末尾几个位置时，a_list.indexOf(current_letter) + 5会超出数组长度，导致translated_letter变为undefined，包含undefined的字符串无法正常写入剪贴板。
2. 剪贴板API调用时机违规：navigator.clipboard.writeText必须在用户主动触发的交互事件（如点击、按键）中调用，直接在页面加载时自动执行encode()会被浏览器安全策略拦截。

修复后的代码 #

// 绑定按钮点击事件触发编码逻辑，符合剪贴板API的安全要求
document.addEventListener('DOMContentLoaded', () => {
  const encodeBtn = document.createElement('button');
  encodeBtn.textContent = '编码并复制';
  document.body.appendChild(encodeBtn);

  encodeBtn.addEventListener('click', function encode() {
    let alphabet = " abcdefghijklmnopqrstuvwxyz1234567890-=!@#$%^&*()_+[];'/.,{}|:~";
    const a_list = alphabet.split('');
    const inputMessage = prompt("message: ");
    if (!inputMessage) return; // 处理用户取消输入的情况
    const m_list = inputMessage.split('');
    let return_message = "";

    for (let i = 0; i < m_list.length; i++) {
      let current_letter = m_list[i];
      let charIndex = a_list.indexOf(current_letter);
      // 处理字符不在字母表中的情况，用取模解决索引越界
      let translatedIndex = charIndex === -1 ? charIndex : (charIndex + 5) % a_list.length;
      let translated_letter = translatedIndex === -1 ? current_letter : a_list[translatedIndex];
      return_message += translated_letter;
    }

    // 写入剪贴板并反馈结果
    navigator.clipboard.writeText(return_message)
      .then(() => alert('编码结果已复制到剪贴板'))
      .catch(err => alert('复制失败：' + err));
  });
});

关键修复点 #

• 索引越界处理：通过% a_list.length实现循环移位，避免超出数组范围。
• 未知字符兼容：若输入字符不在字母表中，直接保留原字符，避免生成undefined。
• 合规调用API：将编码逻辑绑定到按钮点击事件，满足浏览器剪贴板API的安全限制。
• 错误捕获：添加catch块处理写入失败的情况，便于排查问题。

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