H5实现移动端复制文字功能
时间：2023-04-05 20:35:32
HTML5
前言在移动端项目开发过程中，我们经常会遇到需要复制文字的场景。今天我们就来说说移动端复制文字的那些事~效果预览Demo背景分析业务需求很简单，复制指定的文字（比如关键字，复制描述等）到手机剪贴板，所以用户可以直接粘贴复制命令可以将当前选中的内容复制到剪贴板。兼容性如下：setSelectionRange该方法用于设置当前选中文本在input或textarea元素中的起止位置，接受两个参数：第一个选中字符的位置索引，最后一个选中字符的下一个的位置索引。兼容性如下：select该方法与setSelectionRange类似，唯一不同的是select是全选，setSelectionRange是手动指定选中范围，实现思想DOM给某个DOM元素添加容器DOM，以及然后给容器DOM添加一个input标签，并重置input的默认样式，同时设置容器DOM的宽度位置为1，透明度为0.input_wrap{position:absolute;顶部：0；左：0；宽度：1px；不透明度：0；溢出：隐藏；user-select:none;}.input_wrapinput{width:1px;调整大小：无；边框：无；大纲：无；用户选择：无；颜色：透明；background:transparent;
JS逻辑首先获取到我们事先隐藏好的input元素，然后设置input的值为要复制的文本，然后将焦点聚集在input上，使用setSelectionRange方法选择要复制的文本，最后使用document.execCommand('copy')执行复制命令将相关文本复制到客户端剪贴板constinput=document.getElementById('input');input.value='要复制的文本内容';//focusinput.focus();//选择要复制的文本如果(input.setSelectionRange){input.setSelectionRange(0,input.value.length);}else{输入。选择（）;}尝试{反对stresult=document.execCommand('copy');console.error(result?'内容已复制':'复制失败，请重试~');}catch(e){console.error('复制失败，请重试~');}体验优化虽然我们已经实现复制能力，复制后页面会出现输入键盘。为了更好的用户体验，我们需要找到一种方法来阻止键盘模糊。为了选中要复制的副本，手动调用input的focus方法进行focus。为了屏蔽键盘，我们可以在复制后手动调用input.blur()让键盘自动隐藏activeElement。虽然我们手动调用blur来释放焦点，但是有些模型还是会弹出Inputthekeyboard。这里想到的解决方案是使用document.activeElement.blur()进行二次屏蔽。最后练习效果还不错。基本上所有机型都不会弹出输入键盘，或者键盘弹出后马上反弹消失。总结移动端要实现客户端的复制能力，主要依赖于HTML文档暴露的API。最后，优化体验花费的时间最多。参考API-execCommandAPI-setSelectionRange源码地址mobile-copy-text
