原生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(); 检测浏览器是否支持某 ...
随机推荐
- IDEA javax.servlet.http.HttpServletRequest; 不存在 解决方案
使用idea创建一个web项目,在项目中报HttpServletRequest和HttpServletResponse不存在. 问题原因:idea不会默认引用tomcat的jar包. 解决方法: [注 ...
- javascript go()函数
<a href="javascript:history.go(-1);">返回上一页</a> put this in your input tag < ...
- Intent 传递Map数据
android开发默认情况下,通过Bundle bundle=new Bundle();传递值是不能直接传递map对象的,解决办法: 第一步:封装自己的map,实现序列化即可 /** *序列化map供 ...
- CesiumLab V1.3 新功能 MAX场景处理(免费Cesium处理工具集)
每次到写文章的时候就很高兴,意味着又有重大功能更新了,也意味着10多天昏天黑地的闭关日子暂时结束了. 依照惯例,先放图 小范围精模型cesium加载效果 大范围白模cesium加载效果 ...
- win7关闭休眠功能,清除Hiberfil.sys
电脑使用的ssd,本身容量就比较小. 用管理员身份打开命令提示符, 命令窗口中输入: powercfg -h off 即可关闭休眠功能,同时 Hiberfil.sys 文件也会自动删除.
- Java的split()方法
在java中,split方法很常用,但是有些时候我们发现并不管用,不管用的情况:split("."),split("^"), 管用的情况:split(" ...
- token流程图
- Vue--vue中常用的ECMAScript6语法
1.对象的写法 es5中对象: {add:add,substrict:substrict} es6中对象: {add,substrict} 注意这种写法的属性名称和值变量是同一个名称才可以简写,否则要 ...
- webpack学习之—— Loaders
loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中“任务(task)”,并提供了 ...
- Java 1.8 Stream 用例测试
package stream; import model.Student; import org.junit.jupiter.api.Test; import java.util.*; import ...