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 相关文章推荐
使用Firebug对js进行断点调试的图文方法
Apr 02 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 Javascript
JavaScript中省略元素对数组长度的影响
Oct 26 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
Vue分页组件实例代码
Apr 17 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 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中支持多种编码的中文字符串截取函数!
2007/03/20 PHP
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
PHP Pear 安装及使用
2009/03/19 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
PHP 图片处理
2020/09/16 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
js判断变量是否空值的代码
2008/10/26 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
python简单实现基数排序算法
2015/05/16 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
python and or用法详解
2019/06/26 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
python中if及if-else如何使用
2020/06/02 Python
浅析python实现动态规划背包问题
2020/12/31 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
MySQL面试题目集锦
2016/04/14 面试题
大学生全国两会报告感想
2014/03/17 职场文书
旷工辞退通知书
2015/04/17 职场文书
产品调价通知函
2015/04/20 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
银行资信证明
2015/06/17 职场文书