javascript 点击触发复制功能
摘要:
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点击事件-一个按钮触发另一个按钮
<input type="button" value="Click" id="C" onclick="Go();" ...
- 深入A标签点击触发事件而不跳转的详解
本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- Js点击触发Css3的动画Animations、过渡Transitions效果
关键是首先指定动画效果的CSS属性名称,然后在Js中改变这个属性 如果不使用Js触发,可以选择利用css的状态:hover,focus,active 来触发,也可以一开始就触发 下例为Js点击触发过渡 ...
- Javascript中点击(click)事件的3种写法
方法一 <!DOCTYPE html> <html> <head> <title>Javascript中点击事件方法一</title> &l ...
- JavaScript点击按钮显示 确认对话框
//JavaScript点击按钮显示确认对话框 <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- javascript点击变绿色再点击变红色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS伪类选择器active模拟JavaScript点击事件
一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...
- UGUI_冻结技能键盘点击触发
1.在某一张image图上添加Button组件,使其具有点击触发事件的功能: 2.outline组件 3.SkillItem脚本 using System.Collections; using Sys ...
随机推荐
- [转]Kaldi语音识别
转:http://ftli.farbox.com/post/kaldizhong-wen-shi-bie Kaldi语音识别 1.声学建模单元的选择 1.1对声学建模单元加入位置信息 2.输入特征 3 ...
- 感悟优化——Netty对JDK缓冲区的内存池零拷贝改造
NIO中缓冲区是数据传输的基础,JDK通过ByteBuffer实现,Netty框架中并未采用JDK原生的ByteBuffer,而是构造了ByteBuf. ByteBuf对ByteBuffer做了大量的 ...
- Javascript高级编程学习笔记(48)—— HTML5
HTML变动最大的版本应该就是HTML5了,这里就介绍一些 HTML5新增的DOM相关的API 与类相关的扩充 HTML4在普及后有一个十分重要的变化,即class属性使用的场景越来越多 所以HTML ...
- Java核心技术卷一基础知识-第7章-图形程序设计-读书笔记
第7章 图形程序设计 本章内容: * Swing概述 * 创建框架 * 框架定位 * 在组件中显示信息 * 处理2D图形 * 使用颜色 * 文本使用特殊字体 * 显示图像 本章主要讲述如何编写定义屏幕 ...
- 第49节:Java集合框架中底层文档的List与Set
Java集合框架中的List与Set // 简书作者:达叔小生 Collection -> Set 无序不重复 -> 无序HashSet,需要排序TreeSet -> List 有序 ...
- 封装手风琴!使用jQuery!
//封装手风琴 /** * * * */ $.fn.accordion = function (colors, width) { var width=width||0; var colors= col ...
- java开发面试问题
Java面试题:java的垮平台原理 为什么要跨平台使用????? 其实说白了就是个操作系统支持的指令集是不一样的.我们的程序需要再不同的操作系统上运行这些代码. 但是不要说jvm是跨平台的,而真正跨 ...
- sql server 高可用故障转移(5)
测试故障转移群集报告 在SQL-CL01(hsr 50)进行故障转移群集的创建,如图下图所示,在SQL-CL01和SQL-CL02的“服务器管理”中右键点击“功能”,选择“添加功能 勾选故障转移群集 ...
- linux 命令 — cut
cut 以列的方式格式化输出 依赖定界符 cut -f field_list filename 以默认定界符(tab,制表符)分割文件的列,输出指定的列field_list,field_list由列号 ...
- linux 两个查找工具 locate,find
linux 中有很多查找工具,今天主要讲解locate,find两个工具. 一.locate 1.性能介绍 查询系统上预建的文件索引数据库 /var/lib/mlocate/mlocate.db 注意 ...