原生js实现复制文本到粘贴板
项目中经常会遇到点击按钮复制订单号、订单id等内容到粘贴板中的需求。可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('copy'); 这个命令会将选中的内容复制到粘贴板中,那岂不是还需要选中?别急input和textarea元素有一个select()方法,这个方法可以帮我们自动选中。于是就有了下面的代码,复制过去试试吧!
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实现复制内容到粘贴板
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- js 复制文本到粘贴板
//html 在iOS Safari中,剪贴板API有一些限制(实际上是安全措施): 于安全原因,iOS Safari只允许容器中的document.execCommand('copy')文本co ...
- JS复制文本到粘贴板,前端H5移动端点击按钮复制文本
<span id="codeNum">FTYHDSDW</span> <span class=" code-btn" id=&qu ...
- js 复制文字、 复制链接到粘贴板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js点击按钮复制内容到粘贴板
复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...
- Ubuntu Vim 复制到系统粘贴板
/************************************************************************* * Ubuntu Vim 复制到系统粘贴板 * 说 ...
- js插件实现点击复制内容到粘贴板,兼容IE8
先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...
- vue 复制内容到粘贴板
首先是npm安装依赖包:npm install clipboard --save 导入组件:import Clipboard from "clipboard"; html如图: c ...
- 怎样使用js将文本复制到系统粘贴板中
需要使用到三个document方法: 1. document.execCommand(); 执行某个命令 2. document.queryCommandSupported(); 检测浏览器是否支持某 ...
随机推荐
- Leetcode138. Copy List with Random Pointer复制带随机指针的链表
给定一个链表,每个节点包含一个额外增加的随机指针,该指针可以指向链表中的任何节点或空节点. 要求返回这个链表的深度拷贝. 方法一: class Solution { public: RandomLis ...
- useradd -M -s /sbin/nologin mysql -g mysql 报错 Creating mailbox file
由于之前使用以下命令删除了mysql账户 userdel mysql groupdel mysql #如果删除了mysql用户,对应的组也会被删除(只有一个用户的情况下) 执行以下命令时报错 ...
- Python_异常处理try...except、raise
一.try...except 有时候我们写程序的时候,会出现一些错误或异常,导致程序终止.例如,做除法时,除数为0,会引起一个ZeroDivisionError 例子: 1 2 3 4 a=10 b= ...
- 玩转webpack之webpack的基本知识
相信看了gulp教程的小伙伴肯定都可以很容易的掌握gulp了.它已经没有什么可以值得去思考的东西了,如果你已经看懂它就是单纯的在布置任务,然后利用插件的功能去执行任务.最后发布任务,pipe的理念来和 ...
- MySQL下载安装详情教程(Windows)
1.下载MySQL数据库可以访问官方网站:https://www.mysql.com/ 2.点击DOWNLOADS模块下的Community模块下的MySQL Community Server进行下载 ...
- Spring MVC 搭建web项目示例
环境为Eclipse 1:新建Dynamic web project : springMvcDemo 2:下载spring的jar包,把jar包复制到WEB-INF/lib目录下 3.添加配置文件w ...
- centos 安装redis2.8.9
1没有安装gcc yum install gcc-c++ 2. 安装tcl yum install -y tcl 3.安装redis $ wget http://download.redis.io/r ...
- js点击复制文本
// 动态创建 input 元素 var aux = document.createElement("input"); // 获得需要复制的内容 aux.setAttribute( ...
- 洛谷P1311 [NOIP2011提高组Day1T2]选择客栈
P1311 选择客栈 题目描述 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示),且每家客栈都设有一 ...
- 洛谷P1164 小A点菜 [2017年4月计划 动态规划08]
P1164 小A点菜 题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家……餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:“随便点”. 题目描述 不过u ...