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 相关文章推荐
JSON辅助格式化处理方法
Mar 26 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
javascript实现继承的简单实例
Jul 26 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
Vue入门之animate过渡动画效果
Apr 08 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 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
第九节 绑定 [9]
2006/10/09 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python计算文本文件行数的方法
2015/07/06 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
Python使用贪婪算法解决问题
2019/10/22 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
美容院经理岗位职责
2014/04/03 职场文书
给校长的建议书400字
2014/05/15 职场文书
建设单位项目负责人任命书
2014/06/06 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
校长新学期寄语2016
2015/12/04 职场文书
Mysql事务索引知识汇总
2022/03/17 MySQL
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android