H5+JS原生实现一键复制文本功能

377 阅读1分钟

原理: 通过input的onselect属性+js原生document.execCommand("Copy")方法

注意事项: input标签不能有disable和hidden属性,可以使用opacity:0;position:absolute;暴力隐藏

代码如下:

<style>
#input_text{
    opacity:0;
    position:absolute;
}
</style>

<div>
    <p id="p1">摸鱼达人 @ 厦门海</p >
    <button onclick="copy">点击复制</button>
    <input type="text" id="input_text">
</div>

<script>
function copy() {
    var copy_text = document.getElementById("p1").innerText;
    var input_text =document.getElementById("input_text");
    input_text.value = copy_text;
    input_text.select();
    document.execCommand("Copy");
    alert("复制成功!");
}
</script>