原生JS实现粘贴到剪贴板
本文主要讨论原生方法
目前常见的实现粘贴到剪贴板主要有以下两种方法:
- 第三方库 clipboard
- 原生JS, 主要是
document.execCommand
方法
第一种方法按照文档说明,设置触发元素的data-clipboard-text
或者 data-clipboard-target
即可,不做说明,详见文档
第二种方法:
document.execCommand
这个方法的兼容性其实不算很好,特别是移动端,具体这里有, 但clipboard针对部分机型也有问题,所以具体使用还是得看情况, 使用该方法前要先看浏览器是否支持bool = document.execCommand('copy')
MDN对上述方法的解释如下:
当一个HTML文档切换到设计模式 designMode时,文档对象暴露 execCommand 方法,该方法允许运行命令来操纵可编辑区域的内容。
注意加粗部分,设计模式 ,即:使用前我们需切换文档模式为设计模式
document.designMode = 'on'
完成运行命令之后再设置值为off
还有个加粗部分,可编辑区域 ,默认的input和textarea元素是可编辑(设置一个元素的contenteditable="true"
也可激活元素的编辑模式)
先来看表单元素如何实现
ele.addEventListener('click', () => {document.designMode = 'on'let bool = document.execCommand('copy')if (!bool) {alert('sorry, 手动复制吧')} else {let val = 'something'let inputEle = document.createElement('input')document.body.appendChild(inputEle)inputEle.setAttribute('value', val)inputEle.setAttribute('readonly', 'readonly')inputEle.select()document.execCommand('copy')document.body.removeChild(inputEle)alert('copied')}document.designMode = 'off'
})
为避免出现光标或者拉起输入法,需要给元素设置readonly
属性
inputEle.select()方法在一些浏览器中有时不能选中所有内容,这时需要利用inputeElement的setSelectionRange
方法:
HTMLInputElement.setSelectionRange 方法可以从一个被 focused 的 <input>
元素中选中特定范围的内容。
综上加两行:
...
inputEle.focus()
inputEle.setSelectionRange(0, inputEle.value.length)
document.execCommand('copy')
...
如果不是input
等表单元素,不能使用select
和setSelectRange
的话,那么我们可以使用getSelection
和createRange
方法来模拟这个过程了,Selection
对象表示用户选择的文本范围或光标的当前位置,满足执行execComman命令的可编辑活动区域,如下
let range = document.createRange()
let tar = document.querySelector('#code')
range.selectNodeContents(tar)
let selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(range)
document.execCommand('copy')
selection.removeAllRanges()
上述针对非input,textarea等表单元素也能实现了
原生JS实现粘贴到剪贴板相关推荐
- Clipboard.js复制粘贴到剪贴板
来自他人参考链接:https://www.cnblogs.com/kevinCoder/p/6144376.html 转载于:https://www.cnblogs.com/jiaqi1719/p/9 ...
- html5图片剪切板,原生js实现基于base64数据复制图片到剪切板,可以粘贴出图片,模拟浏览器复制功能。...
原生js实现基于base64数据复制图片到剪切板,可以粘贴出图片,模拟浏览器复制功能.前言: 初次发帖排版略丑,见谅.之前我们这边有个需求就是说,前端通过canvas截图然后, 点击一个按钮实现复制截 ...
- autojs 复制到粘贴板_Clipboard.js无需Flash实现剪贴板功能
全部代码如下 Clipboard.js无需Flash实现剪贴板功能 * {margin: 0; padding:0; font-family: '微软雅黑'} #con {width: 800px; ...
- html图片如何复制到剪贴板,记js复制图片到剪贴板的坑
故事背景,需要直接在页面上点击一键粘贴按钮,自动复制服务生成的图片到剪贴板方便业务一些粘贴发送给客户. 1.开始做法,使用原生的document.execCommand('copy')进行复制,代码如 ...
- js map遍历 修改对象里面的值_求职季之你必须要懂的原生JS(上)
点击上方"IT平头哥联盟",选择"置顶或者星标" 一起进步- 互联网寒冬之际,各大公司都缩减了HC,甚至是采取了"裁员"措施,在这样的大环境 ...
- 原生JS实现各种运动之匀速运动
给大家分享一个用原生JS实现的匀速运动,效果如下: 需要注意的是,这种运动效果在实际的开发中用的比较少,用的更多的还是弹性运动和缓冲运动,以下是代码实现,欢迎大家复制粘贴及吐槽. <!DOCTY ...
- 求职季之你必须要懂的原生JS(中)
点击上方"IT平头哥联盟",选择"置顶或者星标" 一起进步- 互联网寒冬之际,各大公司都缩减了HC,甚至是采取了"裁员"措施,在这样的大环境 ...
- 原生JS实现拖动拉开序幕特效
给大家分享一个用原生JS实现的拖动拉开序幕特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. <!DOCTYPE html> <html lang="en" ...
- js实现粘贴板js插件clipboard.js实现一键复制粘贴功能
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能 简介 下载 引入插件 使用 一个节点的复制 多个节点的复制 剪切文本框 复制输入框 简介 clipboard.js 提供了一种更好. ...
最新文章
- 轮滑---1、动作和杂记
- MySQL之SQL优化详解(二)
- 【Java每日一题】20161123
- sap ABAP中常用函数
- [学习指南]运动是基于4412嵌入式技术开发板学习步骤
- LeetCode93. 复原IP地址
- 软件工程导论 07章软件测试
- 一个可以实时查相关电子产品价格的网站
- 【Python读文件】'gbk' codec can't decode byte 0xb1 in position 5: illegal multibyte sequence
- Caffe(12)--实现YOLOv2目标检测
- 程序员时间管理-番茄工作法
- C++实现费氏数列算法
- word文档通配符换行_Word中如何使用通配符进行查找和替换
- outlook如何撤回邮件?(中英文)
- CA EXPO会议参会小记(组图)
- 新福克斯刷隐藏功能简明教程(转)
- 【MySQL 12】MySQL 8.0.18 重新初始化
- balabala---莫队
- 中国有句俗语叫“三天打鱼两天晒网”。 某人从2010年1月1日起开始“三天打鱼两天晒网”, 问这个人在以后的某一天中是“打鱼”还是“晒网”
- 仿网易新闻的首页+QQ的侧滑菜单栏
热门文章
- android SDK安装以及环境变量配置
- [vb]利用WScript.Shell对象隐藏cmd命令行运行
- 银河水滴打响步态识别商用第一枪!3大产品1.35亿订单,工业视觉平台免费开放...
- 要把AI建在赤道上的华为,为何用全栈全场景方案打响第一枪
- 一行代码,Pandas秒变分布式,快速处理TB级数据
- 酷炫好玩又实用 | 可能是CES上六个最值得买的电子产品
- AI正在打王者荣耀排位赛,背后是腾讯100亿开放新战略
- CRM 权限设置 ss
- NSCache使用常见错误
- PCL中分割方法的介绍(2)