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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
Javascript代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
JS IE和FF兼容性问题汇总
Feb 09 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
js获取字符串字节数方法小结
Jun 09 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 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
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
php生成curl命令行的方法
2015/12/14 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
让复选框只能选择一项的方法
2013/10/08 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
vue2中使用sass并配置全局的sass样式变量的方法
2018/09/04 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
js实现随机点名程序
2020/09/17 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
python实现人机猜拳小游戏
2020/02/03 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
新浪微博实习心得体会
2014/01/27 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
创业大赛策划书
2014/03/01 职场文书
大学生交通专业求职信
2014/09/01 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python