原生js
浏览器提供了copy命令 ,可以复制选中的内容document.execCommand("copy")
。如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用copy 命令,将文本复制到剪切板,但是 select() 方法只对<input>
和 <textarea>
有效,如果需要对其他元素进行复制,可以考虑在页面添加一个隐藏的textarea,同步下两个元素的值即可。
-
优点:
原生js,不依赖第三方插件 -
缺点:
mac下不兼容 -
实现:
<!-- 文本所在的代码块 -->
<div id='textDiv' >text you want to copy</div>
<!-- 隐藏的文本域用来同步选中需要复制的文本 -->
<textarea id='textArea' style='display: none'></textarea>
<!-- 复制按钮 -->
<input type='button' id='copyBtn' onclick='copyText()'/>
<script>
var copyText = function() {
// 同步文本
var text = document.getElementById('textDiv').innerText
var textArea = document.getElementById('textArea')
textArea.value = text
// 选中文本
textArea.select()
// 复制
document.execCommand('copy')
}
</script>