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 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
Node.js编写组件的三种实现方式
Feb 25 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
vue计算属性及使用详解
Apr 02 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
微信小程序实现转盘抽奖
Sep 21 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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中上传大体积文件时需要的设置
2006/10/09 PHP
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
Vue-resource拦截器判断token失效跳转的实例
2017/10/27 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
vue如何截取字符串
2019/05/06 Javascript
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
python树莓派红外反射传感器
2019/01/21 Python
Python从入门到精通之环境搭建教程图解
2019/09/26 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
vue项目实现分页效果
2021/03/24 Vue.js
会计专业自我鉴定范文
2013/10/06 职场文书
音乐专业应届生教师求职信
2013/11/04 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
怎样填写就业意向
2014/04/02 职场文书
信访工作个人总结
2015/03/03 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书