织梦移动端选项功能-H5实现移动端复制文字功能

前言

在移动端项目开发中织梦移动端选项功能织梦移动端选项功能，我们经常会遇到需要复制文本的场景。 今天我们就来说说移动端复制文本的那些事~

效果预览

演示

背景分析

业务需求非常简单。 将指定文本（如关键词、复制描述等）复制到手机剪贴板，以便用户直接粘贴。

解决方案相关API实现思路

.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">

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('复制失败，请重试~');
}