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 相关文章推荐
jQuery ajax cache缓存问题
Jul 01 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
jquery 延迟执行实例介绍
Aug 20 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
纯javascript版日历控件
Nov 24 Javascript
微信小程序 登陆流程详细介绍
Jan 17 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
详解JavaScript执行模型
Nov 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报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
Python求离散序列导数的示例
2019/07/10 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
Python加速程序运行的方法
2020/07/29 Python
python实现无边框进度条的实例代码
2020/12/30 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
办公室内勤岗位职责范本
2013/12/09 职场文书
家长会演讲稿范文
2014/01/10 职场文书
违纪检讨书2000字
2014/02/08 职场文书
李培根演讲稿
2014/05/22 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
我爱我班主题班会
2015/08/13 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
js不常见操作运算符总结
2021/11/20 Javascript