JavaScript 点击触发复制功能实例详解


Posted in Javascript onNovember 02, 2018

摘要:

js调用复制功能使用:

document.execCommand("copy", false);

 document.execCommand()方法功能很强大,了解更多请戳: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 点击触发复制功能 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
JavaScript入门教程(2) JS基础知识
Jan 31 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
vue-router 源码实现前端路由的两种方式
Jul 02 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
三步实现ionic3点击退出app程序
Sep 17 Javascript
微信小程序实现留言板(Storage)
Nov 02 #Javascript
微信小程序实现留言板功能
Nov 02 #Javascript
小程序实现留言板
Nov 02 #Javascript
js中的闭包实例展示
Nov 01 #Javascript
微信小程序实现登录遮罩效果
Nov 01 #Javascript
在vue里使用codemirror遇到的问题
Nov 01 #Javascript
vue中使用codemirror的实例详解
Nov 01 #Javascript
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
JavaScript触发器详解
2007/03/10 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
jquery foreach使用示例
2013/09/12 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
2020/12/24 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
jQuery实现简单的回到顶部totop功能示例
2017/10/16 jQuery
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
解决python使用open打开文件中文乱码的问题
2017/12/29 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
python文件读写代码实例
2019/10/21 Python
python对Excel的读取的示例代码
2020/02/14 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
意大利领先的奢侈品在线时装零售商:MCLABELS
2020/10/13 全球购物
加薪通知
2015/04/25 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
python全面解析接口返回数据
2022/02/12 Python
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS