一、代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport">
<title>复制粘贴功能</title>
</head>
<body>
<ul>
<li>
<div>
<p>一、采用document.execCommand()原生方法---在input里的值</p>
<input type="text" value="我是input里的原有值" title="test" id="origin-input">
<button id="origin-input-btn">复制input里的值</button>
</div>
</li>
<li>
<div>
<p>二、采用document.execCommand()原生方法---在非input里的值</p>
<p id="not-input">我不是input</p>
<button id="not-input-btn">复制P里的值</button>
</div>
</li>
<li>
<div>
<p>三、采用插件---clipboard.js</p> https://clipboardjs.com/
</div>
</li>
</ul>
<!--<h3>微信页面</h3>-->
<!--<div class="wrapper">-->
<!--<p id="text">XXXXX</p>-->
<!--<input type="text" id="input" value="XXXXX" readonly="text"/>-->
<!--<a href="javascript:;" onclick="copyText()">点击复制网址</a>-->
<!--</div>-->
<!--<input type="text" value="我是input里的原有值" title="test" id="origin-input">-->
</body>
<script>
document.getElementById('origin-input-btn').addEventListener('click',function () {
var originInput = document.querySelector('#origin-input');
originInput.select();
originInput.setSelectionRange(0, originInput.value.length); // chrome 不支持
if (document.execCommand('copy')) {
document.execCommand('copy');
alert('复制成功');
}else {
alert('你的浏览器不支持复制功能，请升级或更换你的浏览器')
}
})
document.getElementById('not-input-btn').addEventListener('click',function () {
var createInput =document.createElement('input');
// 防止键盘被调起
createInput.setAttribute('readonly','readonly');
createInput.setAttribute('value',document.getElementById('not-input').innerText);
document.body.appendChild(createInput);
createInput.select(); //ios 不支持 但chrome 支持
createInput.setSelectionRange(0, createInput.value.length); // chrome 不支持 但ios支持
// alert(createInput.value.length)
if (document.execCommand('copy')) {
document.execCommand('copy');
alert('复制成功');
}else {
alert('你的浏览器不支持复制功能，请升级或更换你的浏览器')
}
document.body.removeChild(createInput);
})
// function copyText() {
// if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {//区分iPhone设备
// window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
// var Url2=document.getElementById("text");//要复制文字的节点
// var range = document.createRange();
// // 选中需要复制的节点
// range.selectNode(Url2);
// // 执行选中元素
// window.getSelection().addRange(range);
// // 执行 copy 操作
// var successful = document.execCommand('copy');
// // 移除选中的元素
// window.getSelection().removeAllRanges();
// alert("复制成功")
// }else{
// var Url2=document.getElementById("input");//要复制文字的节点
// Url2.select(); // 选择对象
// document.execCommand("Copy"); // 执行浏览器复制命令
// alert("复制成功")
// }
// }
</script>
</html>
二、document.execCommand 坑及兼容性
1、坑
execomond不能用在异步回调中；
2、兼容性
document.execCommand.png
