复制-原生js

复制-原生js

一、原理分析

• 浏览器提供了 copy 命令 ，可以复制选中的内容

document.execCommand("copy")

• 如果是输入框，可以通过 select() 方法，选中输入框的文本，然后调用 copy 命令，将文本复制到剪切板

• select() 方法只对 <input> 和 <textarea> 有效

• 如果是复制其他标签的内容，可以在页面中添加一个 <textarea>，然后把它隐藏掉

二、代码实现

• HTML 部分

<div class="wrapper">
    <p id="text">这个个要复制的内容</p>
    <textarea id="input">select()只对input textarea有效</textarea>
    <button onclick="copyText()">copy</button>
</div>

• JS 部分

function copyText() {
    var text = document.getElementById("text").innerText;
    var input = document.getElementById("input");
    input.value = text; // 修改文本框的内容
    input.select(); // 选中文本
    document.execCommand("copy"); // 执行浏览器复制命令
    alert("复制成功");
}

• 注，不可将input 设置disabled readonly hidden等属性值
• 不可将框高设置成0，和visibility: hidden;