html5移动端点击复制,H5实现移动端复制文字功能

前言

移动端项目开发中，经常遇到需要复制文字的场景，今天咱们就来聊一下，移动端复制文字的那些事~

效果预览

背景分析

业务需求很简单，将指定的文字(例如: 关键字、文案描述等)复制到手机的剪贴板上，方便用户直接进行粘贴

解决方案

相关API

document.execCommand

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

setSelectionRange

该方法用于设定 input 或 textarea 元素中当前选中文本的起始和结束位置，接受两个参数：被选中的第一个字符的位置索引、被选中的最后一个字符的下一个位置索引。兼容性如下所示:

select

该方法和 setSelectionRange 类似，唯一区别是 select 是全选，而 setSelectionRange 是手动指定选中范围

实现思路

DOM

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

.input_wrap {

position: