【JS】实现剪切板功能
2021-02-17 22:18
阅读:402
YPE html>
标签:tar char 移动 方法 append 链接 weixin button exe
某次面试中被问到过,类似的还有用文本实现js的撤销恢复功能。
核心原理: 利用浏览器提供的copy命令
参考链接
注意: 对ipad、iphone等苹果移动端需做单独处理
document.execCommand("copy");
- 如果是复制输入框里的内容,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,复制文本。 注意: select() 方法只对 和
var obj= document.getElementById("demo"); obj.select(); document.execCommand("copy");
- 如果是复制非输入框中的文本,则需先创建一个输入框,进行复制后,再清除这个输入框。
var input = document.createElement(‘input‘); input.setAttribute(‘readonly‘, ‘readonly‘); input.setAttribute(‘value‘, value); document.body.appendChild(input); input.select(); if (document.execCommand(‘copy‘)) { document.execCommand(‘copy‘); } document.body.removeChild(input);
完整兼容性代码:
用到的知识点:
1 window.getSelection:返回一个Selection对象,返回用户选择的文本范围或光标当前位置 参考链接
2 document.creatRange():创建一个range对象,选择结点范围 参考链接
测试复制粘贴功能
ps:也可以使用clipboard.js等开源项目。
【JS】实现剪切板功能
标签:tar char 移动 方法 append 链接 weixin button exe
原文地址:https://www.cnblogs.com/JesseyWang/p/12950680.html
评论
亲,登录后才可以留言!