标签:tar char 移动 方法 append 链接 weixin button exe
某次面试中被问到过,类似的还有用文本实现js的撤销恢复功能。
核心原理: 利用浏览器提供的copy命令
参考链接
注意: 对ipad、iphone等苹果移动端需做单独处理
document.execCommand("copy");
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对象,选择结点范围 参考链接
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试复制粘贴功能</title> </head> <body> <div> <label>卡号:</label> <input type="text" size="20" name="IDCard" id="IDCard"> <button class="copy" onClick="copy(‘IDCard‘)">复制</button> </div> <div> <label>用户名:</label> <input type="text" size="20" name="IDUserName" id="IDUserName"> <button class="copy" onClick="copy(‘IDUserName‘)">复制</button> </div> <script type="text/javascript"> function copy(type) { var textBox = document.getElementById(type); copyText(textBox); } function copyText(node) { if (!node) { return; } var result; var tempTextarea = document.createElement(‘textarea‘); document.body.appendChild(tempTextarea); if (typeof(node) == ‘object‘) { if (node.value) { tempTextarea.value = node.value; } else { tempTextarea.value = node.innerHTML; } } else { tempTextarea.value = node; } //判断设备 var u = navigator.userAgent; if (u.match(/(iPhone|iPod|iPad);?/i)) { window.getSelection().removeAllRanges(); var range = document.createRange(); range.selectNode(tempTextarea); window.getSelection().addRange(range); result = document.execCommand(‘copy‘); window.getSelection().removeAllRanges(); } else { tempTextarea.select(); result = document.execCommand(‘Copy‘); } document.body.removeChild(tempTextarea); if (result) { alert(‘复制成功‘, { removeTime: 1000 }) } else { alert(‘复制失败‘, { removeTime: 1000 }) } return result; } </script> </body> </html>
ps:也可以使用clipboard.js等开源项目。
标签:tar char 移动 方法 append 链接 weixin button exe
原文地址:https://www.cnblogs.com/JesseyWang/p/12950680.html