参考:
1.https://www.cnblogs.com/tylerdonet/p/4533782.html
2.https://www.cnblogs.com/wisewrong/p/7473978.html
平时工作上会遇到一键复制文本、链接等需求,这就需要点击某个按钮,触发js事件把指定的文本复制到粘贴板上,以便其他地方使用。
注意:这些方法只在webkit内核浏览器测试过,并没有做过其他浏览器的兼容,如果需要兼容其他浏览器,请自行搜索。
目前会在以下三种情况下实现:
1、已经选中p/span等标签的文本,需要复制选中文本
<script type="text/javascript">
function copyTxt() {
document.execCommand("Copy"); // 这句就可以把已选文本复制
}
</script>
2、实现点击按钮,复制文本框中的的内容
<script type="text/javascript">
function copyUrl() {
let url = document.querySelector('input');
url.select(); // 选择对象
document.execCommand('Copy'); // 执行浏览器复制命令
alert("已复制好,可贴粘。");
}
</script>
3、没选中,但想要复制指定元素的文本。
思路:在文本标签中,绝对定位一个透明的input(这个input不能用type=hidden或者display、visibility去隐藏,会获取不到文本的),然后点击复制按钮,去获取这个Input的文本
<style>
input {position: absolute; top: 0; left: 0; opacity: 0; z-index: -10;}
</style>
<script type="text/javascript">
function copyTxt() {
let url = document.querySelector('input');
url.select(); // 选择对象
document.execCommand('Copy'); // 执行浏览器复制命令
alert("已复制好,可贴粘。");
}
</script>
网友评论