js实现点击按钮复制某个元素的值

11月23日 11时50分发布

日常开发中js实现点击按钮一键复制内容的方法很多，比如使用使用 document.execCommand() 方法。也可以使用使用 Clipboard API，还可以使用第三方库，例如 Clipboard.js，下边我们说最简单的一种原始方法。

HTML代码

<div>
    <text type="text" id="copyContent">这是要复制的内容</text>
    <input onclick="copyLink();" value="一键复制" type="button"></input>
</div>

JS代码

<script type="text/Javascript"> 
function copyLink(){
    const copyContent = document.getElementById("copyContent").innerText;
    const textarea = document.createElement('textarea');
    textarea.value = copyContent;
    document.body.appendChild(textarea);
 
    textarea.select(); // 选择对象
    try {
       const result = document.execCommand('copy');
       if (result) {
         alert('复制成功!');
         console.log('复制成功')
       } else {
         console.error('复制失败!');
        }
         } catch (error) {
         console.error('复制错误:', error);
       }
           
         // 移除元素
       textarea.remove();
    } 
</script>

原创不易，转载请注明出处！

评分

欢迎为Ta评分