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" 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格 ...
随机推荐
- Mysql,Oracle与Java字段类型映射关系
Mysql,Oracle与Java字段类型映射关系 参考相关博文 MySQL/Oracle字段类型 Java字段类型 最大长度 BIT java.lang.Boolean 1 BLOB java.la ...
- Ajax原理,技术封装与完整示例代码
在做项目和学习的时候,经常用到Ajax的相关技术,但是这方面的技术总是运用的不是十分好,就寻找相关博客来学习加深Ajax技术相关. 一.Ajax简介 二.同步.异步传输区别 2.1 异步传输 2.2 ...
- js创建javaMap
/** * Simple Map * var m = new Map(); * m.put('key','value'); * var v_otherMap = v_m.toMapString();* ...
- Java并发包源码学习系列:阻塞队列实现之LinkedBlockingDeque源码解析
目录 LinkedBlockingDeque概述 类图结构及重要字段 linkFirst linkLast unlinkFirst unlinkLast unlink 总结 参考阅读 系列传送门: J ...
- Scala面向对象—类详解
package com.zzy import scala.beans.BeanProperty class Aclass { @BeanProperty//生成get和set方法对于其他框架里对标准的 ...
- 2020杭电多校 C / HDU 6879 - Mine Sweeper
题意: t组输入,每组输入一个s 你需要输出一个r行c列的阵列,这个阵列中'X'代表炸弹,'.'表示没有炸弹 对于'.'这些位置都会有一个数值,这个值取决于这个位置附近8个位置,这8个位置一共有几个炸 ...
- Educational Codeforces Round 96 (Rated for Div. 2) E. String Reversal (思维,逆序对)
题意:给你一个字符串,每次可以调换现字符串的相邻两个字符,问最少操作多少次使得这个字符串等于其反转过来的字符串. 题解:先考虑字符串中没有相同字符的情况,那么我们每次将目前字符串的最后一个字符一直调换 ...
- Codeforces Round #272 (Div. 2) B. Dreamoon and WiFi (暴力二进制枚举)
题意:给你一个只含\(+\)和\(-\)的字符串,统计它的加减和,然后再给你一个包含\(+,-,?\)的字符串,其中\(?\)可以表示为\(+\)或\(-\),问有多少种情况使得第二个字符串的加减和等 ...
- Codeforces Round #643 (Div. 2) E. Restorer Distance (贪心,三分)
题意:给你\(n\)个数,每次可以使某个数++,--,或使某个数--另一个++,分别消耗\(a,r,m\).求使所有数相同最少的消耗. 题解:因为答案不是单调的,所以不能二分,但不难发现,答案只有一个 ...
- A - 你能数的清吗 51Nod - 1770
题目: 演演是个厉害的数学家,他最近又迷上了数字谜.... 他很好奇 xxx...xxx(n个x)*y 的答案中 有多少个z,x,y,z均为位数只有一位的整数. 大概解释一下: 22222*3 = ...