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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
document.getElementById介绍
Sep 13 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
js实现登录验证码
Dec 22 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
微信小程序实现留言板(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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
php下通过POST还是GET来传值
2008/06/05 PHP
php实现aes加密类分享
2014/02/16 PHP
php实现mysql封装类示例
2014/05/07 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
基于php编程规范(详解)
2017/08/17 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
javascript+HTML5自定义元素播放焦点图动画
2016/02/21 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
德国旅游网站:weg.de
2018/06/03 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
诚实守信主题班会
2015/08/13 职场文书
微信早安问候语
2015/11/10 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技