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实现上传图片并预览的效果实现代码
Apr 11 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
几种响应式文字详解
May 19 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
微信小程序自定义组件实现环形进度条
Nov 17 Javascript
layer.open回调获取弹出层参数的实现方法
Sep 10 Javascript
Vue中key的作用示例代码详解
Jun 10 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下判断数组中是否存在相同的值array_unique
2008/03/25 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
改进Django中的表单的简单方法
2015/07/17 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
Under Armour安德玛中国官网:美国高端运动科技品牌
2018/03/09 全球购物
什么是网络协议
2016/04/07 面试题
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
网吧七夕活动策划方案
2014/08/31 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
Golang 语言控制并发 Goroutine的方法
2021/06/30 Golang
Python作用域和名称空间的详细介绍
2022/04/13 Python