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动态修改Li节点值的方法
Jan 20 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
Javascript的比较汇总
Jul 25 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
JavaScript 跨域之POST实现方法
May 07 Javascript
js实现橱窗展示效果
Jan 11 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 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和ACCESS写聊天室(九)
2006/10/09 PHP
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
php递归函数中使用return的注意事项
2014/01/17 PHP
easyui的tabs update正确用法分享
2014/03/21 PHP
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
用Python编写web API的教程
2015/04/30 Python
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
环保倡议书范文
2014/05/12 职场文书
工程项目经理任命书
2014/06/05 职场文书
国际商务专业求职信
2014/07/15 职场文书
财产分割协议书范本
2014/11/03 职场文书
杨善洲电影观后感
2015/06/04 职场文书
爱国电影观后感
2015/06/19 职场文书
人事任命书范本
2015/09/21 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
python字典进行运算原理及实例分享
2021/08/02 Python