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" 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格 ...
随机推荐
- Linux-处理用户输入
Linux-处理用户输入 1.命令行参数 1.2读取参数 1.3 读取脚本名 1.4测试参数 2.特殊参数变量 2.1 参数统计 2.2抓取所有的数据 3.移动变量 4.处理选项 5.选项标准化 6. ...
- Java实现发送HTTP的POST请求,返回数据以及请求状态
/** * @param url:请求url * @param content: 请求体(参数) * @return errorStr:错误信息;status:状态码,response:返回数据 */ ...
- vmware打开虚拟级断电情况下,无法找到虚拟机文件
1.此时会在建立的虚拟机目录下,有一些 %虚拟机名字%.vmx.lck 或者别的 %虚拟机名字%.***.lck 删除这些文件夹 2.虚拟文件 是一个后缀名为vmx的文件,发现断电后 变成了v ...
- Git实践笔记(二)
前一篇中说完了本地仓库的一些操作,本篇将继续进行撤销修改和删除的操作,以及远端仓库的设置.提交.克隆. 撤销修改和删除 现在在test.txt文件里面增加一行,内容为add error msg,先通过 ...
- 若依管理系统RuoYi-Vue(一):项目启动和菜单创建
若依管理系统应该是国内最受欢迎的完全开源的后端管理系统了吧,看看gitee上的star数量,着实惊人.若依系统有很多个版本 版本 gitee地址 说明 前后端不分离版本 https://gitee.c ...
- 烧录失败导致boot无法加载的解决措施,再也不怕烧成砖了
目录: 1.usb烧录时出现的问题截图 2.重新擦除boot发现失败的情况 3.解决措施 烧录失败导致boot无法加载的解决措施在烧录系统的时候经常会遇到烧录失败的情况,如果能通过再次执行烧录能烧上肯 ...
- linux(1)Mac上传文件到Linux服务器
前言 我们使用mac时,想让本地文件上传至服务器,该怎么办呢 windows系统,我们可以使用xftp或者rz命令,那么mac呢? mac系统,我们可以使用sftp.scp或者rz命令,本文介绍sft ...
- Codeforces Round #648 (Div. 2) C. Rotation Matching
题目链接:https://codeforces.com/contest/1365/problem/C 题意 有两个大小为 $n$ 的排列,可以循环左移或右移任意次,问最多有多少对同一值在同一位置. 题 ...
- hdu5637 Transform (bfs+预处理)
Problem Description A list of n integers are given. For an integer x you can do the following operat ...
- hdu5438 Ponds
Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total Submissi ...