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 ...
随机推荐
- 40个Java多线程面试问题
1. 多线程有什么用? 一个可能在很多人看来很扯淡的一个问题:我会用多线程就好了,还管它有什么用?在我看来,这个回答更扯淡.所谓"知其然知其所以然","会用"只 ...
- Mysql基本查询、视图、索引、触发器
基本查询 1.修改String sql="update smbms_user set userCode=?,userName=? where id=?"; 2.删除用户String ...
- 使用HttpClient发送Get/Post请求 你get了吗?
HttpClient 是Apache Jakarta Common 下的子项目,可以用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端编程工具包,并且它支持 HTTP 协议最新的版本和建议 ...
- centos上ftp服务器的简易安装部署
申明:本示例为centos7 开启ftp服务命令为:systemctl start vsftpd 关闭防火墙命令为systemctl stop firewalld 7版本以下开启ftp服务器为 ser ...
- C# 在窗体上可拖动控件
最近做了一个标签打印配置功能,需要根据客户需求自定义标签格式.显示内容,这时就用到了后台生成控件,并且其控件可在窗口中进行拖动,这里仅为记录一下实现过程,方便以后使用. 结果图: 源码: using ...
- MyEclipse中JavaMail冲突问题
MyEclipse中的JavaEE5中的mail包中只有接口,而没有实现,所以不能使用 会抛出:java.lang.NoClassDefFoundError: com/sun/mail/util/BE ...
- 《CLR Via C#》读书笔记:26.线程基础
一.线程开销 操作系统创建线程是有代价的,其主要开销在下面列举出来了. 内存开销 线程内核对象 拥有线程描述属性与线程上下文,线程上下文占用的内存空间为 x86 架构 占用 700 字节.x64 架构 ...
- vue error:The template root requires exactly one element.
error:[vue/valid-template-root] The template root requires exactly one element. 原因: 因为vue的模版中只有能一个根节 ...
- sql server 索引阐述系列四 表的B-Tree组织
一.概述 说到B-tree组织,就是指索引,它可以提供了对数据的快速访问.索引使数据以一种特定的方式组织起来,使查询操作具有最佳性能.当数据表量变得越来越大,索引就变得十分明显,可以利用索引查找快速满 ...
- mysql 下 计算 两点 经纬度 之间的距离(转)
公式如下,单位米: 第一点经纬度:lng1 lat1 第二点经纬度:lng2 lat2 round(6378.138*2*asin(sqrt(pow(sin( (lat1*pi()/180-lat2* ...