js点击复制剪贴板
     2017-1-29    +0°    513  

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

<html>
<head>
<title>js点击复制剪贴板</title>
</head>
<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>
<html>
<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");
    alert("已复制好,可贴粘。");
    // 删除创建元素
    document.body.removeChild(aux);
}
</script>