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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
jquery实现瀑布流效果分享
Mar 26 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
JavaScript开发者必备的10个Sublime Text插件
Feb 27 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
微信小程序实现留言板(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者的疑难问答(1)
2006/10/09 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PHP基于正则批量替换Img中src内容实现获取缩略图的功能示例
2017/06/07 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
Javascript之BOM(window对象)详解
2016/05/25 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
python实现给微信公众号发送消息的方法
2017/06/30 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
用python建立两个Y轴的XY曲线图方法
2019/07/08 Python
零基础学python应该从哪里入手
2020/08/11 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
总经理岗位职责范本
2014/02/02 职场文书
我的长生果教学反思
2014/04/28 职场文书
工作建议书范文
2014/05/13 职场文书
机电一体化专业求职信
2014/07/22 职场文书
村级干部党员公开承诺事项
2015/05/04 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书