クリップボードへの貼り付けの JS 実装例のコード共有

この記事では、クリップボードに貼り付けるための JS サンプル コードを主に説明します。現在、クリップボードに貼り付けるには 2 つの一般的な方法があります。

サードパーティ ライブラリのクリップボード
ネイティブ JS、主に document.execCommand メソッド
最初の方法は、ドキュメントの指示に従い、トリガー要素の data-clipboard-text または data-clipboard-target を設定することです。説明はありません。詳細については、Document

2 番目のメソッド:
document.execCommand

を参照してください。このメソッドの互換性は、特にモバイル端末ではあまり良くありません。詳細はここにありますが、一部のモデルではクリップボードにも問題があるため、具体的な使い方は状況によって異なりますが、このメソッドを使用する前に、まずブラウザが bool = document.execCommand('copy') をサポートしているかどうかを確認する必要があります。

MDN では上記のメソッドを次のように説明しています。

HTML ドキュメントが切り替わるときデザイン モード designMode に変更すると、ドキュメント オブジェクトは execCommand メソッドを公開します。このメソッドにより、コマンドを実行して編集可能領域のコンテンツを操作できるようになります。

太字のデザインモードに注目してください。つまり、使用する前に、ドキュメントモードをデザインモードに切り替える必要があります

document.designMode = 'on'

実行コマンドが完了したら、値をoffに設定してください
太字の部分もあります。編集可能エリア、デフォルト入力、および textarea 要素は編集可能です (要素の contenteditable="true" を設定すると、要素の編集モードを有効にすることもできます)

まず form 要素を実装する方法を見てみましょう

ele.addEventListener('click', () => {    document.designMode = 'on'
    let bool = document.execCommand('copy')    if (!bool) {
        alert('sorry, 手动复制吧')
    } else {        let val = 'something'
        let inputEle = document.createElement('input')        document.body.appendChild(inputEle)
        inputEle.setAttribute('value', val)
        inputEle.setAttribute('readonly', 'readonly')
        inputEle.select()        document.execCommand('copy')        document.body.removeChild(inputEle)
        alert('copied')
    }    document.designMode = 'off'})

カーソルを避けるためにまたは、入力メソッドをプルアップする場合は、要素に readonly を設定する必要があります。属性

inputEle.select() メソッドは、一部のブラウザーではすべてのコンテンツを選択できない場合があります。この場合、inputElement の setSelectionRange メソッドを使用する必要があります:

。 HTMLInputElement.setSelectionRange メソッドは、フォーカスされた
要素から特定の範囲のコンテンツを選択できます。

要約すると、次の 2 行を追加します。

...inputEle.focus()
inputEle.setSelectionRange(0, inputEle.value.length)
document.execCommand('copy')...

input などのフォーム要素ではなく、select メソッドと setSelectRange メソッドを使用できない場合は、getSelection メソッドと createRange メソッドを使用してこのプロセスをシミュレートできます。Selection オブジェクトはテキスト範囲を表します。現在の位置は、次のように execComman コマンドの実行を満たす編集可能なアクティビティ領域です

let range = document.createRange()let tar = document.querySelector('#code')
range.selectNodeContents(tar)let selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(range)document.execCommand('copy')
selection.removeAllRanges()

上記は、非入力要素、テキストエリア、その他のフォーム要素にも実装できます
元のリンク:segmentfault .com
詳細な記事: https://github.com/axuebin /articles/issues/26

現在、クリップボードへの貼り付けを実装するには 2 つの一般的な方法があります:

サードパーティ ライブラリのクリップボード
ネイティブ JS、主にドキュメント.execCommand メソッド
1 つ目の方法は、ドキュメントの指示に従ってトリガーを設定することです。詳細はドキュメントを参照してください。 2番目の方法:

document.execCommand

このメソッドの互換性は、特にモバイルエンドではあまり良くありません。詳細はここにありますが、クリップボードも一部のモデルでは問題があるため、具体的な使用方法は状況によって異なります。このメソッドを使用するには、まずブラウザが bool = document.execCommand('copy') をサポートしているかどうかを確認する必要があります。

MDN は上記のメソッドについて次のような意見を持っています。

HTML ドキュメントがデザイン モードに切り替わると、 document オブジェクトは execCommand メソッドを公開します。これにより、コマンドを実行して編集可能領域の内容を操作できるようになります。

太字のデザインモードに注目してください。つまり、使用する前に、ドキュメントモードをデザインモードに切り替える必要があります

document.designMode = 'on'

実行コマンドが完了したら、値をoffに設定してください

太字の部分もあります。編集可能エリア、デフォルト入力、および textarea 要素は編集可能です (要素の contenteditable="true" を設定すると、要素の編集モードを有効にすることもできます)

まず form 要素を実装する方法を見てみましょう

ele.addEventListener('click', () => {    document.designMode = 'on'
    let bool = document.execCommand('copy')    if (!bool) {
        alert('sorry, 手动复制吧')
    } else {        let val = 'something'
        let inputEle = document.createElement('input')        document.body.appendChild(inputEle)
        inputEle.setAttribute('value', val)
        inputEle.setAttribute('readonly', 'readonly')
        inputEle.select()        document.execCommand('copy')        document.body.removeChild(inputEle)
        alert('copied')
    }    document.designMode = 'off'})

カーソルを避けるためにまたは、入力メソッドをプルアップする場合は、要素に readonly を設定する必要があります。属性

inputEle.select() メソッドは、一部のブラウザーではすべてのコンテンツを選択できない場合があります。この場合、inputElement の setSelectionRange メソッドを使用する必要があります:

。 HTMLInputElement.setSelectionRange メソッドは、フォーカスされた

要素から特定の範囲のコンテンツを選択できます。

要約すると、次の 2 行を追加します。

...inputEle.focus()
inputEle.setSelectionRange(0, inputEle.value.length)
document.execCommand('copy')...

input などのフォーム要素ではなく、select メソッドと setSelectRange メソッドを使用できない場合は、getSelection メソッドと createRange メソッドを使用してこのプロセスをシミュレートできます。Selection オブジェクトはテキスト範囲を表します。ユーザーが選択したカーソルまたは現在の位置は、execComman コマンドの実行に一致する編集可能なアクティビティ領域は次のとおりです

let range = document.createRange()let tar = document.querySelector('#code')
range.selectNodeContents(tar)let selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(range)document.execCommand('copy')
selection.removeAllRanges()

上記は、非入力要素、テキストエリア、その他のフォーム要素にも実装できます

関連する推奨事項:

JavaScript コンテンツをクリップボードにコピーする実装コード

JS クリップボードを操作するためのコード共有

クリップボードにコピーするJavaScriptメソッドのまとめ

以上がクリップボードへの貼り付けの JS 実装例のコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。