JavaScript 手机端复制内容至剪切板,并实现Androi

对于事件触发点设置在什么标签上面,都是不影响的.

  <!-- 使用 -->                 
  <input type="text" readonly value="点我复制" onclick="cop('OK')" style="font-size: 10rem">

  //复制功能
  function copy(message) {
        var input = document.createElement("input");
        input.value = message;
        document.body.appendChild(input);
        input.select();
        input.setSelectionRange(0,input.value.length);
        document.execCommand('Copy');
        document.body.removeChild(input);
        //$.toast("复制成功", "text");//这一行用不了,应该是三方框架的函数,于是用另一种方法实现一个仿Android Toast
        Toast("复制成功",1000);
    }


  //仿Android Toast,具体根据自己需求修改
    function Toast(msg,duration){
        duration = isNaN(duration)?3000:duration;
        let m = document.createElement('div');
        m.innerHTML = msg;
        m.style.cssText="width:60%; min-width:150px; background:#000; opacity:0.5; height:40px; color:#fff; " +
            "line-height:40px; text-align:center; border-radius:5px; position:fixed;" +
            " top:40%; left:20%; z-index:999999; font-weight:bold;font-size:2.5rem;padding: 10px";
        document.body.appendChild(m);
        setTimeout(function() {
            let d = 5;
            m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
            m.style.opacity = '0';
            setTimeout(function() {
                document.body.removeChild(m)
            }, d * 1000);
        }, duration);
    }

OK,暂时如此实现,在此提醒大家,这种方法性能有些跟不上,弹出速度是能感受得到的.可以根据自己需求具体优化,提供一种思路.