美文网首页
[JS]点击复制(有兼容问题)

[JS]点击复制(有兼容问题)

作者: 泉落云生 | 来源:发表于2018-07-16 21:05 被阅读19次
    <input id="test"  value="" />
    <button onclick="textCopy(document.getElementById('test').value)" >复制</button> 
    

    js:

    var textCopy=function (data) {
        var f=document.createElement("form");
        f.id="copy-"+Date.parse(new Date());
        f.onsubmit=function(){return false};
        f.style="opacity: 0;height: 1px;width: 1px;overflow: hidden;position:fixed;top: -1;left: -1;z-index: -1;"
        f.innerHTML=`<button onclick='story.select();document.execCommand("Copy");'></button>
        <textarea name="story">${data}</textarea>`;
        document.body.appendChild(f);
        document.querySelector(`#${f.id}>button`).click();  
        document.body.removeChild(document.getElementById(f.id));
    }       
    

    第二种情况(方法):

    <div class="wrapper">
           <p id="text">shit</p>
           <textarea id="input">这是幕后黑手</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("复制成功");
    }
    

    つづく...

    相关文章

      网友评论

          本文标题:[JS]点击复制(有兼容问题)

          本文链接:https://www.haomeiwen.com/subject/qtkipftx.html