H5實現移動端複製文字功能

前言

移動端項目開發中，常常遇到須要複製文字的場景，今天我們就來聊一下，移動端複製文字的那些事~

效果預覽

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