使用JavaScript制作复制按钮触发myInp.select相关TypeError错误如何解决

错误原因及修复方案 #

以下是问题的具体原因和修复方案：

• 问题1：ID不匹配
  你的input标签的id属性多写了一个前导空格：<input id=" myInp" type="text">，而JS代码中查找的是不带空格的myInp，document.getElementById找不到对应元素就会返回null，调用null的select方法自然会抛出类型错误。
• 问题2：复制执行逻辑位置错误
  你现在把document.execCommand("Copy")写在了点击事件回调之外，页面加载完成就会直接执行这行代码，此时还没有选中输入框内容，就算修复了ID问题也无法实现点击复制的效果。
• 优化点：document.execCommand已经被W3C标记为废弃API，更推荐使用现代浏览器原生支持的Clipboard API实现复制功能，稳定性和兼容性更好。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 id="title">Copy to Clipboard - JavaScript</h2>
    <!-- 去掉id前的多余空格 -->
    <input id="myInp" type="text">
    <button id="btncopy">Copy</button>
</body>
<script>
    const myInp = document.getElementById("myInp");
    const btncopy = document.getElementById("btncopy");
    btncopy.onclick = async function() {
        // 优先用Clipboard API实现复制
        if (navigator.clipboard) {
            await navigator.clipboard.writeText(myInp.value);
            // 可自行添加复制成功提示逻辑，比如alert('复制成功')
            return;
        }
        // 兼容旧浏览器的降级逻辑
        myInp.select();
        document.execCommand("Copy");
    };
</script>
</html>

内容的提问来源于stack exchange，提问作者Ayush Singh Bhadoria