需求场景
使用document.execCommand()方法，以下简称为“命令API”。
示例一
HTML部分
<input type="text" id="text_input" />
<button type="button" id="copy_text">copy</button>JavaScript部分
var inputElem = document.getElementById(‘text_input‘);
var btnElem = document.getElementById(‘copy_text‘);
btnElem.addEventListener(‘click‘, function() {
if(!document.execCommand) {
console.error(‘copy unsupport‘);
return;
}
inputElem.select();
var result = document.execCommand(‘copy‘);
if(result) {
console.log(‘copy success‘);
} else {
console.error(‘copy fail‘);
}
});示例二
实际开发中，需要复制的内容通常是文本元素中的文本。此时，可以使用一个不在可见区域内的表单元素来变向实现。
HTML部分
<input type="text" id="text_input" />
<p>paragraph</p>
<button type="button" id="copy_text">copy</button>CSS部分
#text_input {
position: absolute;
top: -100px;
}JavaScript部分
var inputElem = document.getElementById(‘text_input‘);
var btnElem = document.getElementById(‘copy_text‘);
var textElem = document.querySelector(‘p‘);
btnElem.addEventListener(‘click‘, function() {
if(!document.execCommand) {
console.error(‘当前环境不支持复制功能‘);
return;
}
inputElem.value = textElem.innerText;
inputElem.select();
var result = document.execCommand(‘copy‘);
if(result) {
console.log(‘copy success‘);
} else {
console.error(‘copy fail‘);
}
});与例子一的差别在于，选中表单元素前，需要对其进行赋值操作。
注意事项
- 检测当前环境是否支持命令API，这一步不可或缺。
- 浏览器环境不支持命令API，需要合理地提示用户手动进行复制操作。所以，一定不能设置文本元素
user-select: none;，这样会使文本不能被选择。 - 表单元素必须处于被选中状态，即调用
inputElement.select()方法，文本元素没有select()方法。 - 经测试，不能使用
display: none;或visibility: hidden;来隐藏表单元素。所以，只能将此表单元素，定位至可以见区域之外。
更多方案
- clipboard.js：不依赖flash的一个插件。实现原理和上面的例子是类似的，使用插件可以简化很多开发工作。
