js点击复制剪贴板

代码用原生写的。工作中用的angular，所以如果有用angular的话，请把js代码copyToClipboard函数中的document.getElementById(elementId).innerHTML || document.getElementById(elementId).value替换成相应$scope变量，其他地方对于会angular的肯定也会改，不一一赘述了。
对于兼容性，测了一下，Chrome、firefox、IE7及IE7+都支持，唯一需要注意的是chrome 41版本并未出现效果，也无报错。

 

<style>
p {
    font-size: 20px;
}

input {
    width: 300px;
    height: 30px;
}

</style>
<body>
    <p id="p1">这是P1标签</p>
    <br/>
    <p id="p2">这是P2标签</p>
    <br/>
    <input id="input" type="text" value="这里是输入框标签">
    <br/>
    <br/>
    <textarea id="textarea" rows="3" cols="20">这里是textarea标签</textarea>

    <br/>
    <br/>
    <button onclick="copyToClipboard('p1')">复制P1</button>
    <button onclick="copyToClipboard('p2')">复制P2</button>
    <button onclick="copyToClipboard('input')">复制input</button>
    <button onclick="copyToClipboard('textarea')">复制textarea</button>

    <br/>
    <br/>
    <input type="text" placeholder="请将复制的内容右键粘贴进行查看" />
</body>
<script>
    function copyToClipboard(elementId) {
      // 创建元素用于复制
      var aux = document.createElement("input");

      // 获取复制内容
      var content = document.getElementById(elementId).innerHTML || document.getElementById(elementId).value;
    
      // 设置元素内容
      aux.setAttribute("value", content);
    
      // 将元素插入页面进行调用
      document.body.appendChild(aux);
    
      // 复制内容
      aux.select();
    
      // 将内容复制到剪贴板
      document.execCommand("copy");
    
      // 删除创建元素
      document.body.removeChild(aux);
    }
</script>

文章来自    http://www.qdfuns.com/notes/22887/b8f13315a49ea57c498459edc42d4ef3.html

posted @ 2017-09-06 14:53  webnote  阅读(423)  评论(0)  编辑  收藏  举报