js实现复制粘贴
项目中经常会遇到点击按钮复制订单号、订单id等内容到粘贴板中的需求。可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('copy'); 这个命令会将选中的内容复制到粘贴板中,那岂不是还需要选中?别急input和textarea元素有一个select()方法,这个方法可以帮我们自动选中。于是就有了下面的代码,复制过去试试吧!
1
2
3
4
5
6
7
8
9
10
11
|
function copy(text) { var input = document.createElement( 'input' ); input.setAttribute( 'readonly' , 'readonly' ); // 防止手机上弹出软键盘 input.setAttribute( 'value' , text); document.body.appendChild(input); // input.setSelectionRange(0, 9999); input.select(); var res = document.execCommand( 'copy' ); document.body.removeChild(input); return res; } |
思路分析:
- 创建input或textarea,因为这两个DOM具有select方法,可以选中内容(document.execCommand('copy')复制内容必要条件);
- 给input赋值为需要赋值的内容
- 将DOM添加到文档中
- 选中输入框中的值(也就是要复制的值)
- 执行复制命令
- 最后别忘了从文档中移除DOM元素
- 此函数最后返回了复制是否成功的结果(true/false,document.execCommand('copy')本身会返回true/false),你可以做相应的交互提示等。
js实现复制粘贴的更多相关文章
- js 实现复制粘贴
js 实现复制粘贴 <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" ...
- js 实现复制粘贴文本过滤(保留文字和图片)
实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content=" ...
- 通过如何通过js实现复制粘贴功能
在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...
- js实现复制粘贴功能
在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...
- 在html页面通过js实现复制粘贴功能
前言:要实现这个功能,常用的方式大概分为两类,第一种就是上插件,这个网上有大把,第二种就是直接用几行JS来实现. 这次说第二种实现方式,这方式有很大的局限性,只能用表单元素,并且不能设置disable ...
- JS ----实现复制粘贴功能 (剪切板应用clipboardData)
注意:ie7,与ie8 对网页有个复制的权限,需在“安全”中的“自定义级别”的脚本中设置 clipboardData 对象 提供了对剪贴板的访问. 三个方法 :1.clearData(sDataFor ...
- [JavaScript] 怎么使用JS禁止复制粘贴
1. 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格键右边的windows键也可以激活这个快捷菜单 <table border oncontextmenu=re ...
- js 实现复制粘贴时注意方法中需要两次点击实现的bug
方法一:利用ZeroClipboard 详见 :http://www.jb51.net/article/22403.htm 1先引入 <script type="text/javasc ...
- js禁止复制粘贴
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格 ...
随机推荐
- [CCPC2019网络赛] 1008-Fishing Master(思维)
>传送门< 题意:现在需要捕$n$条鱼并且将它们煮熟来吃.每条鱼要煮相应的时间才能吃(可以多煮一会),锅里每次只能煮一条鱼,捕一条鱼的时间是相同的,但是在捕鱼的时间内不能做其他事(比如换一 ...
- KMP浅谈
关于KMP KMP其实是三个人名字的缩写,因为是他们同时发现的(大佬惹不起); KMP作为CSP考点,主要亮点是其优秀的匹配复杂度,而且消耗空间小,比起hash虽然有些局限性,但是因为其正确率 ...
- hdu5790 Prefix(Trie树+主席树)
Problem Description Alice gets N strings. Now she has Q questions to ask you. For each question, she ...
- Codeforces Round #622 (Div. 2) A. Fast Food Restaurant(全排列,DFS)
Codeforces Round #622 (Div. 2) A. Fast Food Restaurant 题意: 你是餐馆老板,虽然只会做三道菜,上菜时还有个怪癖:一位客人至少上一道菜,且一种菜最 ...
- HDU - 4300 Clairewd’s message (拓展kmp)
HDU - 4300 题意:这个题目好难读懂,,先给你一个字母的转换表,然后给你一个字符串密文+明文,密文一定是全的,但明文不一定是全的,求最短的密文和解密后的明文: 题解:由于密文一定是全的,所以他 ...
- Codeforces Round #608 (Div. 2) E. Common Number (二分,构造)
题意:对于一个数\(x\),有函数\(f(x)\),如果它是偶数,则\(x/=2\),否则\(x-=1\),不断重复这个过程,直到\(x-1\),我们记\(x\)到\(1\)的这个过程为\(path( ...
- Kibana 地标图可视化
ElasticSearch 可以使用 ingest-geoip 插件可以在 Kibana 上对 IP 进行地理位置分析, 这个插件需要 Maxmind 的 GeoLite2 City,GeoLite2 ...
- Kubernets二进制安装(1)集群,软件,IP规划
1.Kubernetes节点信息情况 主机名 简称 角色 IP地址 操作系统 mfyxw10.mfyxw.com mfyxw10 K8S代理节点1 192.168.80.10 CentOS7.7 mf ...
- 容器之List接口下各实现类(Vector,ArrayList 和LinkedList)的线程安全问题
Vector .ArrayList 和LinkedList都是List接口下的实现类,但是他们之间的区别和联系是什么呢? 首先: 然后: 如果您仅仅想知道结论,那么可以关闭了. 下面我讨论讨论为什么. ...
- Netty(二)Netty 与 NIO 之前世今生
2.1 Java NIO 三件套 在 NIO 中有几个核心对象需要掌握:缓冲区(Buffer).选择器(Selector).通道(Channel). 2.1.1 缓冲区 Buffer 1.Buffer ...