h5复制粘贴文字到剪切板

需求:点击按钮时复制某段文字,转发时可以直接粘贴

<div id="copy-txt">
    前方高能预警,朋友圈文案在这里哦:**放大招,一分坐公交,还能领红包!
div>
<button onclick="copyTXT()">复制button>

HTML5 提供了复制功能的如下API:

  • document.createRange(): 创建选中容器,返回一个 range Object,支持移动端和 PC 端。
  • selectNode(DOM): 返回 range Object 上挂载的方法,用来添加选中元素,只能添加一个。
  • window.getSelection():用来获得当前选中的元素的内容。一般而言就是用鼠标选中页面上的内容。
  • addRange(range): 这个方法是挂载到 getSelection()方法下的,用来执行元素的选中。
function copyTXT(){
    var copyDOM = document.querySelector('#copy-txt'); //指定的DOM元素
    var range = document.createRange(); // 创建容器
    range.selectNode(copyDOM); // 选中需要复制的节点
    window.getSelection().addRange(range); // 执行选中元素
    var successful = document.execCommand('copy');// 执行 copy 操作
    try {
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copy was ' + msg);
    } catch(err) {
        console.log('unable to copy');
    }
    window.getSelection().removeAllRanges(); // 移除选中的元素
}

值得注意的是:以上复制的方法是不能自主执行的,也就是说需要某个事件去触发,比如点击,长按等。

你可能感兴趣的:(JS/jQ,H5)