[JS]点击按钮实现复制粘贴

2018-08-24  本文已影响9人  泉落云生
<div class="input"/>12312314</div>
<button class="btn" id="btn">复制</button>

<script>
// 核心方法
//params: 需要复制的对象(元素)
function copyToClipboard( obj ) {
    var aux = document.createElement("input");// 创建元素用于复制
    // 获取复制内容
    var content = obj.innerText || obj.value;
    // 设置元素内容
    aux.setAttribute("value", content);
    // 将元素插入页面进行调用
    document.body.appendChild(aux);
    // 复制内容
    aux.select();
    //aux.setSelectionRange(0, inputText.value.length);
    // 将内容复制到剪贴板
    document.execCommand("copy",true);
    // 删除创建元素
    document.body.removeChild(aux);
}
// 事件
var btn = document.querySelector('#btn');
btn.onclick = function(e){
    e.stopPropagation()
    var a = document.querySelector('.input');
    copyToClipboard(a)
}
</script>

关于方法

  1. 将所需复制的内容赋值给新生成的input框
  2. 调用document.execCommand()实现复制到剪贴板

document.execCommand() 除了复制之外,还可以实现很多功能

上一篇 下一篇

猜你喜欢

热点阅读