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解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
分享19个JavaScript 有用的简写写法
Jul 07 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
es6函数之rest参数用法实例分析
Apr 18 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 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
MySql中正则表达式的使用方法描述
2008/07/30 PHP
PHP 字符串 小常识
2009/06/05 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
2015/03/19 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
Python龙贝格法求积分实例
2020/02/29 Python
python上selenium的弹框操作实现
2020/07/13 Python
python爬虫用mongodb的理由
2020/07/28 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
吃空饷专项治理工作实施方案
2014/03/04 职场文书
合同意向书范本
2014/07/30 职场文书
会计岗位职责
2015/02/03 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers