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 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 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 数组实例说明
2008/08/18 PHP
PHP url 加密解密函数代码
2011/08/26 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
PHP中常用的转义函数
2014/02/28 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
js实现无缝滚动图
2017/02/22 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
python分割和拼接字符串
2013/11/01 Python
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
python机器学习之神经网络(二)
2017/12/20 Python
Django发送邮件功能实例详解
2019/09/02 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
django 取消csrf限制的实例
2020/03/13 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
咖啡店自主创业商业计划书
2014/01/22 职场文书
仓库文员岗位职责
2014/04/06 职场文书
法定代表人授权委托书
2014/09/19 职场文书
Python实现为PDF去除水印的示例代码
2022/04/03 Python
Python进程间的通信之语法学习
2022/04/11 Python
Go获取两个时区的时间差
2022/04/20 Golang
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL