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

上一篇:Egret 中实现3种状态切换按钮


下一篇:Android之监测手机网络状态的广播