如何使用异步剪切板 AsyncClipboard API
如何使用异步剪切板 AsyncClipboard API
⭐️ 更多前端技术和知识点,搜索订阅号
JS 菌
订阅
长时间我们一直在使用 document.execCommand
来与剪切板做交互,尤其是基本上都在使用 clipboard.js 这个库,其基本原理也是插入 DOM 树中一个隐藏的 textarea 元素,然后将要复制的文本写入到 textarea 元素中,最后调用 textarea 的 select 方法和 document.execCommand('copy')
方法,然后删除 textarea 元素
虽说 execCommand 能够一定程度上解决浏览器兼容问题:
即便是使用一个简单的剪切板都这么费劲需要一个第三方库,而且剪切板的这种方法是同步的。同步方法交互剪切板的阻塞、有限的访问权限、跨浏览器体验不一致、对多种数据类型的支持有限等问题解决起来也是麻烦。
这里有篇文章讲述到底该如何用 JS 操作剪切板:https://www.lucidchart.com/techblog/2014/12/02/definitive-guide-copying-pasting-javascript/
? 无论如何,异步剪切板 Async Clipboard API
这个 API 在 Chrome 66 版本以上得到了支持:
我们可以在新版本中使用这个异步版本的剪切板,那么具体该如何使用这个 API 呢
权限
使用这个 API 当然是需要获取权限的,我们可以使用 PaymentRequest 这个 API 来监听是否拥有这个权限:
对应的有两个 query 查询条件:
{ name: 'clipboard-read' }
{ name: 'clipboard-write' }
读取剪切板
调用 clipboard 对象下的 readText 方法即可 ?
navigator.clipboard.readText().then(console.log)
写入剪切板
navigator.clipboard.writeText(+new Date())
上面的代码每次刷新页面都会写入最新时间戳
另外还有 read 和 write 方法,但浏览器没有实现,可以读取或写入其他类型格式的数据
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- R语言多分类logistic逻辑回归模型在混合分布模拟单个风险损失值评估的应用
- sas神经网络:构建人工神经网络模型来识别垃圾邮件
- 图像倾斜校正算法的MATLAB实现:图像倾斜角检测及校正
- 手写dubbo框架9-SPI实现
- R语言非参数模型厘定保险费率:局部回归、广义相加模型GAM、样条回归
- VsCode插件之Live Serve探秘.(上)
- R语言小数定律的保险业应用:泊松分布模拟索赔次数
- R语言中自编基尼系数的CART回归决策树的实现
- Docker hello world
- 前端环境配置
- R数据读取(数据文件解析)
- 安装读取的Excel的包
- R不联网状态下安装库
- Rstdio导入Excel文件
- 基于OpenCV的实时停车地点查找