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学习笔记(十七)js 优化
Feb 04 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
JS上传前预览图片实例
Mar 25 Javascript
js禁止回车提交表单的示例代码
Dec 23 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
Jun 20 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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项目打包方法
2008/02/18 PHP
PHP制作万年历
2015/01/07 PHP
php绘制圆形的方法
2015/01/24 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
精通Javascript系列之数值计算
2011/06/07 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
easyui validatebox验证
2016/04/29 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
countup.js实现数字动态叠加效果
2019/10/17 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python+tkinter使用40行代码实现计算器功能
2018/01/30 Python
opencv python 2D直方图的示例代码
2018/07/20 Python
python实现祝福弹窗效果
2019/04/07 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
如何通过Python实现标签云算法
2019/07/02 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Python greenlet和gevent使用代码示例解析
2020/04/01 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
Python3如何实现Win10桌面自动切换
2020/08/11 Python
python之pygame模块实现飞机大战完整代码
2020/11/29 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
优秀教师感人事迹材料
2014/05/04 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
群众路线表态发言材料
2014/10/17 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
银行工作心得体会范文
2016/01/23 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers