前言

挪动端我的项目开发中，常常遇到须要复制文字的场景，明天咱们就来聊一下，挪动端复制文字的那些事~

成果预览

Demo

背景剖析

业务需要很简略，将指定的文字(例如: 关键字、文案形容等)复制到手机的剪贴板上，不便用户间接进行粘贴

解决方案

相干API

  • document.execCommand

该办法容许运行命令来操纵可编辑内容区域的元素，其中执行 copy 命令，能够将以后选中的内容拷贝到剪贴板中。兼容性如下所示:

  • setSelectionRange

该办法用于设定 input 或 textarea 元素中以后选中文本的起始和完结地位，承受两个参数：被选中的第一个字符的地位索引、被选中的最初一个字符的下一个地位索引。兼容性如下所示:

  • select

该办法和 setSelectionRange 相似，惟一区别是 select 是全选，而 setSelectionRange 是手动指定选中范畴

实现思路

  • DOM

在某一个 DOM 元素中增加一个容器 DOM ，而后在容器 DOM 中追加 input 标签，并重置 input 的默认款式，同时将容器 DOM 的宽度地位为 1 ，透明度设置为 0

.input_wrap {    position: absolute;    top: 0;    left: 0;    width: 1px;    opacity: 0;    overflow: hidden;    user-select: none;}.input_wrap input {    width: 1px;    resize: none;    border: none;    outline: none;    user-select: none;    color: transparent;    background: transparent;}<div class="input_wrap">    <input id="input" type="text" readonly="true"></div>
  • JS逻辑

首先获取咱们当时暗藏好的 input 元素，接着将 input 的 value 设置为待复制的文本，而后将焦点汇集在 input 上，再应用 setSelectionRange 办法选中待复制的文本，最初应用document.execCommand('copy')执行复制命令，即可将相干文本复制到客户端的剪贴板中

const input = document.getElementById('input');input.value = '待复制的文本内容';// 聚焦input.focus();// 抉择须要复制的文本if (input.setSelectionRange) {    input.setSelectionRange(0, input.value.length);} else {    input.select();}try {    const result = document.execCommand('copy');    console.error(result ? '内容已复制' : '复制失败，请重试~');} catch (e) {    console.error('复制失败，请重试~');}

体验优化

只管咱们曾经实现了复制的能力，然而复制之后页面上会呈现输出键盘，为了更好的用户体验，咱们须要想方法屏蔽键盘

  • blur

咱们为了选中待复制的文案，手动调用了 input 的 focus 办法进行聚焦，为了屏蔽键盘，咱们能够在复制完结后手动调用 input.blur() ，让键盘自动隐藏

  • activeElement

只管咱们手动调用了 blur 开释焦点，然而局部机型上依然会弹出输出键盘，这里想到的解决方案是应用 document.activeElement.blur() 来进行二次屏蔽，最终实际成果还不错，根本所有机型都不会弹出输出键盘，或者弹出键盘后立马回弹隐没

小结

挪动端实现复制能力，次要还是依赖HTML文档裸露的API来实现，最初破费工夫最多的还是在进行体验优化上

参考资料

  • API - execCommand
  • API - setSelectionRange

源码地址

  • mobile-copy-text