有时候我们想通过点击按钮来复制某个标签下的内容, 我们可以借助Input标签中的select()方法来进行处理。
- 获取span标签中的值。
- 创建一个input元素。
- 把获取到的值赋给input的value。
- 把创建的input元素添加到dom树中。
- 执行select()方法。
- 执行document的复制命令。
- 移除新增的Input元素。
代码如下, 供参考:
<div>
<span id='span'>我是内容，我是内容</span>
<div id='div'>我也是内容，我也是内容</div>
</div>
<!-- 复制按钮部分 -->
<button onClick={() => this.handleCopy()}'>复制</button>
<!-- 下面代码块是执行方法 -->
handleCopy = () => {
const spanText = document.getElementById('span').innerText;
const oInput = document.createElement('input');
oInput.value = spanText;
document.body.appendChild(oInput);
oInput.select(); // 选择对象
document.execCommand('Copy'); // 执行浏览器复制命令
oInput.className = 'oInput';
oInput.style.display = 'none';
document.body.removeChild(oInput);
};
