参考WEB API接口
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
实现
document.execCommand(‘copy’)
语法
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
参数
aCommandName: 命令名字,copy,cut等
aShowDefaultUI:一个 Boolean, 是否展示用户界面,一般为 false。
aValueArgument:一些命令(例如insertImage)需要额外的参数(insertImage需要提供插入image的url),默认为null,一般不用。
要想copy内容,只能对可编辑区域(input,textarea)进行操作,所以实现需分为复制input内容与复制非input内容。
- 复制input内容:代码以react+antd demo为例
// antd的input组件,class为ant-input
<Input style={{maxWidth: '270px', marginRight: '10px'}} onChange={(e)=>this.changeInput(e)} value={this.state.inputValue} />
<Button type="primary" onClick={()=>this.fzValue()}>点击一键复制内容</Button>
fzValue() {
console.log('点击了一键复制内容按钮')
if (document.execCommand('copy')) {
const input = document.getElementsByClassName('ant-input')
input[0].select()
document.execCommand('copy')
alert('复制成功')
}
}
- 复制非input内容,需创建input框,value为要复制的内容
<div className={'hello-div'}>Hello</div>
<Button type="primary" onClick={()=>this.fzValue()}>增加</Button>
fzValue() {
if (document.execCommand('copy')) {
// 获取要复制的内容
const value = document.getElementsByClassName('hello-div')[0].innerHTML
// 创建input
const input = document.createElement('input')
// 将input的value设置为要复制的内容
input.setAttribute('value', value);
document.body.appendChild(input);
input.select()
document.execCommand('copy')
// 销毁input
input.remove()
}
}