毎日30秒⏱ クリップボードに内容をコピー

概要
クリップボード、コピー、互換性 は先端開発の過程でよく出会う需要であり、大部分の学生は開発時に直接検索ボックスを開けて他の人が書いたコンポーネントライブラリを探し始め、賢い学生は問題を考え始めます.

製品の使用シーンは何ですか?

多くのブラウザを互換化する必要がありますか?

プロジェクトで頻繁に使用する必要がありますか?

サードパーティ製ライブラリが追加で提供する機能を使用する必要がありますか?

この コードは、製品の使用シーンがあまり複雑ではない場合に使用できます.

//        https://30secondsofcode.org
const copyToClipboard = str => {
    const el = document.createElement('textarea');
    el.value = str;
    el.setAttribute('readonly', '');
    el.style.position = 'absolute';
    el.style.left = '-9999px';
    document.body.appendChild(el);

    const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;

    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);

    if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
    }
};

コード解析
ブラウザは、document.execCommand('copy')を実装するためのオリジナルの方法を提供していますが、「テキストボックスまたは入力ボックスを選択する必要がある場合」を前提としているので、 のテキストボックスを作成し、画面に表示されないように配置します.

const el = document.createElement('textarea');
el.value = str;
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);

作成したtextarea要素を選択し、コピーしたテキスト内容を使用して、textarea要素を削除します.

el.select();
document.execCommand('copy');
document.body.removeChild(el);

なぜ大きなコードをスキップしたのですか?
実はこれまでにtextareaが実現されており、スキップコードはそれぞれ2つのシーンの最適化であり、製品開発のシーンに応じてこの2つのコードを使用するかどうかを選択することができます.

シーンがモバイルデバイス

を含むかどうか

ページがユーザにテキスト

を選択させることができるかどうか
モバイルデバイスの最適化
モバイルデバイスで「テキストボックスが選択されている場合、仮想キーボードがポップアップされる」という問題が発生すると、携帯電話の応答が遅く、仮想キーボードのポップアップと消失のプロセスが表示される場合があります.このコードの点眼のペンの1つは、入力ボックスを読み取り専用に設定することです.

el.setAttribute('readonly', '');

テクニック:読み取り専用プロパティを使用して、仮想キーボードのイジェクトを防止します.
オプションのテキスト最適化
コードのもう一つのポイントは、ユーザーがある文字を選んだ後、 のコピー操作をクリックすると、この選択した文字が消え、太った親指が携帯電話の画面でテキストの内容を選んでいるように不快な操作であり、中国語の字を選ぶことがユーザーの体験に非常に影響を与えることだ. の一連のカーソル選択APIを使用して、ユーザーが以前に選択したテキストオブジェクトを記録することができます.

const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;

さらにコピー操作を行った後、document.getSelectionを判断し、ユーザが以前に選択した文字を記録したオブジェクトを復元する.

if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
}

共に成長する
困った町には肩を並べて同行する人が欠かせない.selected一緒に成長させましょう.

もっと多くの人に文章を見せたいなら、 を注文してください.

小二を励ましたいなら、Githubに をあげることができます.

小二ともっと交流したいなら、微信 を追加してください.

本稿の原稿はPushMeTopから