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容器启动失败-解决方案
在看问题之前首先熟悉几个命令 相关命令 1.docker attach 连接到正在运行中的容器: 命令:docker attach --sig-proxy=false mynginx 2.docker ...
- COS数据处理WebP压缩 | 减少70%图像大小
当前网络中,图片仍是占用流量较大的一部分,在网站的视觉效果和加载速度之间,我们始终面临着两难选择. 一个网站的内容,不仅仅只有文字,图片.动图.视频等众多元素都在帮助用户从我们的网站获取更多的信息,当 ...
- Java|ArrayList源码分析|add()增加方法和grow()扩容方法
本文结构: 1.介绍特点 2.基本方法 3.重点源码分析 1.介绍特点 ArrayList: 是List的一个具体实现子类,是List接口的一个数组实现 (里面必定维护了一个数组). 默认初始容量10 ...
- DEDECMS:修改DEDECMS会员中心发送邮件时,邮件内容里出现在DEDE链接
1.在member/index_do.php里,把文件里的 $mailbody .= "Power by http://www.dedecms.com 织梦内容管理系统!\r\n" ...
- C++ 标准模板库(STL):vector
目录 1. vector 1.1 vector的定义 1.2 vector容器内元素的访问 1.3 vector 常用函数实例解析 1.4 vector的常见用途 1. vector 变长数组,长度根 ...
- vuex-pathify 一个基于vuex进行封装的 vuex助手语法插件
首先介绍一下此插件 我们的目标是什么:干死vuex 我来当皇上!(开个玩笑,pathify的是为了简化vuex的开发体验) 插件作者 davestewart github仓库地址 官方网站,英文 说一 ...
- Linux上搭建https服务器
https原理: 步骤:1.客户端浏览器向服务器发送如下信息:(1)客户端支持的SSL/TLS协议的版本号(2)密钥算法套件(3)客户端产生的随机数,用于稍后生成"会话密钥"2.服 ...
- Word 脚本 (自用)
打开开发工具 右击功能区->自定义功能区 勾选开发工具->确定 导入代码 开发工具选项卡->Visual Basic 右击Normal->插入->模块 粘贴代码-> ...
- hdu2430Beans(单调队列)
Mr. Pote's shop sells beans now. He has N bags of beans in his warehouse, and he has numbered them ...
- HTTP的传输编码(Transfer-Encoding:chunked) / net::ERR_INVALID_CHUNKED_ENCODING
https://blog.csdn.net/m0_37668842/article/details/89138733 https://www.cnblogs.com/jamesvoid/p/11297 ...