はじめに
モバイルプロジェクトの開発は、多くの場合、シーンのテキストをコピーする必要が発生し、今日はそれらのもののモバイルコピーテキストについてお話します〜。
プレビュー
背景分析
ビジネス要件は単純で、指定されたテキストを携帯電話のクリップボードにコピーし、ユーザーが直接貼り付けられるようにすることです。
解決策
関連API
- document.execCommand
このメソッドにより、編集可能なコンテンツ領域の要素を操作するコマンドを実行することができます。コピーコマンドは、現在選択されているコンテンツをクリップボードにコピーするために実行されます。互換性を以下に示します。
アイデア
- DOM
DOM 要素にコンテナ DOM を追加し、input タグをコンテナ DOM に追加します。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ロジック
まず、hidden input要素を取得し、入力の値をコピーするテキストに設定します。次に、入力にフォーカスを当て、setSelectionRangeメソッドを使用してコピーするテキストを選択します。最後に、document.execCommand('copy')を使用してコピーコマンドを実行し、該当するテキストをクライアントのクリップボードにコピーします。最後に、document.execCommand('copy')を使用して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('コピーに失敗した。~');
}
エクスペリエンスの最適化
コピー機能は実装されましたが、入力キーボードはコピー後のページに表示されるため、より良いユーザーエクスペリエンスのためには、キーボードをブロックする方法を見つける必要があります。
- ぼかし
コピーするテキストを選択するには、手動で入力のfocusメソッドを呼び出してフォーカスを当てます。キーボードをブロックするには、コピー終了後に手動でinput.blur()を呼び出してキーボードを自動的に非表示にします。 - アクティブ要素
手動でフォーカスを解放するためにぼかしを呼び出しますが、いくつかのモデルはまだ入力キーボードがポップアップ表示されますが、ここで解決策の考え方は、2番目の遮蔽のためにdocument.activeElement.blur()を使用することです、最終的な練習の効果は悪くない、基本的にすべてのモデルは、入力キーボードがポップアップ表示されない、またはポップアップポップアップが消えた直後にキーボードがポップアップ表示されます！
まとめ
複製機能のモバイル実装は、依然としてHTMLドキュメントによって公開されるAPIに大きく依存しており、最終的にはエクスペリエンスの最適化に最も多くの時間が費やされます。
- API - execCommand
- API - setSelectionRange
ソースコードアドレス
- モバイルコピーテキスト
