javascript 点击触发复制功能
2021/9/1 17:06:18
本文主要是介绍javascript 点击触发复制功能,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
这功能只要是使用
document.execCommand("copy", false); 这个是一个很强大的方法,了解更多请戳:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
正文:
调用以上方法,就实现了copy功能,可是,在调用之前,你需要先选中需要复制的内容。
选中需要复制的内容可使用select()方法,然而该方法只能选中input或者textarea标签里的内容。
因此,如果你想实现点击一个按钮,就复制一段话的功能
第一:如果这段话是被input或textarea标签包裹,则可以直接只用select(),
第二:如果是其他任意标签包裹的话,则需要新creat一个input标签,给该input标签赋value,然后使用select()方法,最后将该input标签remove了。
function copy(that){ var inp =document.createElement('input'); // create input标签 document.body.appendChild(inp) // 添加到body中 inp.value =that.textContent // 给input设置value属性为需要copy的内容 inp.select(); // 选中 document.execCommand('copy',false); // copy已经选中的内容 inp.remove(); // 删除掉这个dom } <p onclick="copy(this)">hello man</p>
1:select()使用范围;
2:删除一个dom,使用node.remove();
3:调用复制功能使用document.execCommand()方法;
参考链接:
https://stackoverflow.com/questions/45071353/javascript-copy-text-string-on-click
这篇关于javascript 点击触发复制功能的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-18Python编程入门:面向对象编程基础
- 2024-10-18数据结构入门指南:轻松掌握基础知识
- 2024-10-18数据库技术入门指南
- 2024-10-18初学者指南:轻松入门面向对象编程
- 2024-10-18数据结构入门教程:轻松掌握基础概念与应用
- 2024-10-18数据库学习:从入门到实践的简单教程
- 2024-10-18面向对象开发学习:初学者指南
- 2024-10-18软件工程学习:入门与初级教程
- 2024-10-18软件设计师考试大纲详解与备考指南
- 2024-10-18软考培训机构的选择与入门指南