h5实现一键复制到粘贴板 兼容ios
之前发布过一篇文章原生 js 实现点击按钮复制文本,后来发现在ios的safari上失效。现又找到一个解决方案。
实现原理
采用document.execCommand('copy')
来实现复制到粘贴板功能
复制必须是选中input框的文字内容,然后执行document.execCommand('copy')
命令实现复制功能。
初步实现方案
const input = document.querySelector('#copy-input'); if (input) { input.value = text; if (document.execCommand('copy')) { input.select(); document.execCommand('copy'); input.blur(); alert('已复制到粘贴板'); } }
兼容性问题
1、input 输入框不能hidden
或者display: none
;如果需要隐藏输入框可以使用定位脱离文档流,然后移除屏幕
#copy-input{ position: absolute; left: -1000px; z-index: -1000; }
2、ios下不能执行document.execCommand('copy')
在ios设备下alert(document.execCommand('copy'))
一直返回false
查阅相关资料发现ios下input不支持input.select();
因此拷贝的文字必须存在,不能为空字符串,不然也不会执行复制空字符串的功能
参考这篇博客实现了ios下复制的功能https://blog.csdn.net/VLilyV/article/details/77523591
主要是使用textbox.createTextRange
方法选中输入框的文字
// input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法 // 选择文本。createTextRange(setSelectionRange)是input方法 function selectText(textbox, startIndex, stopIndex) { if (textbox.createTextRange) {//ie const range = textbox.createTextRange(); range.collapse(true); range.moveStart('character', startIndex);//起始光标 range.moveEnd('character', stopIndex - startIndex);//结束光标 range.select();//不兼容苹果 } else {//firefox/chrome textbox.setSelectionRange(startIndex, stopIndex); textbox.focus(); } }
3、ios设备上复制会触发键盘弹出事件
给input加上readOnly
只读属性
踩完以上的坑,总结的代码如下
git地址https://github.com/zhaosheng808/copytext
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> <title>h5实现一键复制到粘贴板 兼容ios</title> </head> <body> <h3>h5实现一键复制到粘贴板 兼容ios</h3> <button onclick="copyText('h5实现一键复制到粘贴板 兼容ios')">copy</button> <script> const copyText = (text) => { // 数字没有 .length 不能执行selectText 需要转化成字符串 const textString = text.toString(); let input = document.querySelector('#copy-input'); if (!input) { input = document.createElement('input'); input.id = "copy-input"; input.readOnly = "readOnly"; // 防止ios聚焦触发键盘事件 input.style.position = "absolute"; input.style.left = "-1000px"; input.style.zIndex = "-1000"; document.body.appendChild(input) } input.value = textString; // ios必须先选中文字且不支持 input.select(); selectText(input, 0, textString.length); if (document.execCommand('copy')) { document.execCommand('copy'); alert('已复制到粘贴板'); }else { console.log('不兼容'); } input.blur(); // input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法 // 选择文本。createTextRange(setSelectionRange)是input方法 function selectText(textbox, startIndex, stopIndex) { if (textbox.createTextRange) {//ie const range = textbox.createTextRange(); range.collapse(true); range.moveStart('character', startIndex);//起始光标 range.moveEnd('character', stopIndex - startIndex);//结束光标 range.select();//不兼容苹果 } else {//firefox/chrome textbox.setSelectionRange(startIndex, stopIndex); textbox.focus(); } } }; // 复制文字 // 必须手动触发 点击事件或者其他事件,不能直接使用js调用!!! // copyText('h5实现一键复制到粘贴板 兼容ios') /*兼容性补充: 移动端: 安卓手机:微信(chrome)和几个手机浏览器都可以用。 苹果手机:微信里面和sarafi浏览器里也都可以, PC:sarafi版本必须在10.2以上,其他浏览器可以. 兼容性测试网站:https://www.caniuse.com/*/ </script> </body> </html>
原文:ZHAO_