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" 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格 ...
随机推荐
- windows下使用HyperV安装Centos7虚拟机
以前都是用的VM(VMWare)安装虚拟机, 然鹅, 现在电脑装了Docker需要开启Windows的HyperV, 而我使用的VM版本(14)和HyperV 是不兼容的, 于是搜索引擎搜索了一下解决 ...
- WebApi Swagger 接口多版本控制 适用于APP接口管理
最近研究了下swagger多版本的维护,网上的文章千篇一律,无法满足我的需求,分享下我的使用场景以及实现 演示环境:Visual Studio 2019.Asp.NET WebAPI.NET Fram ...
- ProBuilder快速原型开发技术 ---操作基础
本篇文章笔者对ProBuilder(以下简称:PB),进行操作基础的介绍. 一:PB大小图标显示方式 PB操作面板有两种显示方式:小图标与大图标.大图标优点是显示清晰操作方便,缺点是没有更加精确的参数 ...
- 2020 ICPC Universidad Nacional de Colombia Programming Contest
2020 ICPC Universidad Nacional de Colombia Programming Contest A. Approach 三分 显然答案可以三分,注意\(eps\)还有两条 ...
- Codeforces Round #651 (Div. 2) A. Maximum GCD(数论)
题目链接:https://codeforces.com/contest/1370/problem/A 题意 有 $n$ 个数大小分别为 $1$ 到 $n$,找出两个数间最大的 $gcd$ . 题解 若 ...
- HDU4366 Successor【dfs序 分块】
HDU4366 Successor 题意: 给出一棵根为\(1\)的树,每个点有两个权值\(x,y\),每次询问一个点的子树中\(x\)比这个点的\(x\)大且\(y\)值最大的那个点 题解: 如果以 ...
- codeforces632D. Longest Subsequence (最小公倍数)
You are given array a with n elements and the number m. Consider some subsequence of a and the value ...
- Long Long Message POJ - 2774 后缀数组
The little cat is majoring in physics in the capital of Byterland. A piece of sad news comes to him ...
- PowerShell随笔7 -- Try Catch
PowerShell默认的顺序执行命令,即使中间某一句命令出错,也会继续向下执行. 但是,我们的业务有时并非如此,我们希望出现异常情况后进行捕获异常,进行记录日志等操作. 和其他编程语言一样,我们可以 ...
- .NET并发编程-函数闭包
本系列学习在.NET中的并发并行编程模式,实战技巧 内容目录 函数式编程闭包的应用记忆化函数缓存 函数式编程 一个函数输出当做另一个函数输入.有时候一个复杂问题,我们拆分成很多个步骤函数,这些函数组合 ...