1. Document.execCommand() メソッドDocument.execCommand() はクリップボードを操作するための従来の方法であり、さまざまなブラウザでサポートされています。 コピー、切り取り、貼り付けの 3 つの操作をサポートします。
(1)コピー操作コピーするときは、まずテキストを選択し、次に document.execCommand('copy') を呼び出すと、選択したテキストがクリップボードに追加されます。 定数 inputElement = document.querySelector('#input'); 入力要素を選択します。 document.execCommand('コピー'); 上記の例では、スクリプトは最初に inputElement inputElement (inputElement.select()) 内のテキストを選択し、次に document.execCommand('copy') を使用してそれをクリップボードにコピーします。 コピー操作は、ユーザーによってトリガーされるイベント リスニング関数 (たとえば、ユーザーがボタンをクリックする) に配置するのが最適であることに注意してください。一部のブラウザでは、スクリプトが自律的に実行されるとエラーが報告される場合があります。 (2)貼り付け操作貼り付けるときに、document.execCommand('paste') を呼び出すと、クリップボードの内容が現在フォーカスされている要素に出力されます。 const pasteText = document.querySelector('#output'); 貼り付けテキスト.focus(); document.execCommand('貼り付け'); (3)デメリットDocument.execCommand() メソッドは便利ですが、いくつか欠点もあります。 まず、選択したコンテンツのみをクリップボードにコピーすることができ、任意のコンテンツをクリップボードに書き込むことはできません。 第二に、これは同期操作であり、大量のデータをコピー/貼り付けすると、ページが遅くなります。一部のブラウザでは、ユーザーの許可を求めるプロンプト ボックスが表示され、ユーザーが選択する前にページが応答しなくなります。 これらの問題を解決するために、ブラウザメーカーは非同期クリップボード API を提案しました。 2. 非同期クリップボードAPIClipboard API は、従来の document.execCommand() メソッドよりも強力で合理的な次世代のクリップボード操作メソッドです。 すべての操作は非同期であり、Promise オブジェクトを返すため、ページの遅延は発生しません。さらに、任意のコンテンツ(画像など)をクリップボードに入れることもできます。 navigator.clipboard プロパティは Clipboard オブジェクトを返し、すべての操作はこのオブジェクトを通じて実行されます。 定数clipboardObj = navigator.clipboard; navigator.clipboard プロパティが undefined を返す場合、現在のブラウザがこの API をサポートしていないことを意味します。 ユーザーは機密データ (パスワードなど) をクリップボードに置く可能性があるため、スクリプトがそれを任意に読み取ることができるようにするとセキュリティ上のリスクが生じます。そのため、この API には多くのセキュリティ制限があります。 まず、Chrome ブラウザでは、HTTPS プロトコルを使用するページのみがこの API を使用できると規定されています。ただし、開発環境 (localhost) では暗号化されていないプロトコルの使用が許可されます。 次に、呼び出すときにユーザーの許可を明示的に取得する必要があります。権限の具体的な実装には、Permissions API を使用します。クリップボードに関連する権限には、clipboard-write (書き込み権限) と clipboard-read (読み取り権限) の 2 つがあります。 「書き込み権限」はスクリプトに自動的に付与されますが、「読み取り権限」はユーザーが明示的に付与する必要があります。つまり、クリップボードへの書き込みはスクリプトによって自動的に実行されますが、クリップボードを読み取るときは、ブラウザが読み取りに同意するかどうかをユーザーに尋ねるダイアログ ボックスをポップアップ表示します。 さらに、スクリプトは常に現在のページのクリップボードを読み取ることに注意してください。これによって生じる問題の 1 つは、関連するコードを開発者ツールに貼り付けて直接実行すると、この時点での現在のページが Web ページではなく開発者ツール ウィンドウであるため、エラーが発生する可能性があることです。 (非同期() => { const テキスト = navigator.clipboard.readText() を待機します。 console.log(テキスト); })(); 上記のコードを開発者ツールに貼り付けて実行すると、エラーが発生します。コードの実行中は、開発者ツール ウィンドウが現在のページであり、このページには Clipboard API が依存する DOM インターフェイスがないためです。 1 つの解決策は、関連するコードを setTimeout() に入れて実行を遅らせ、関数を呼び出す前にブラウザ ページ ウィンドウをすばやくクリックして現在のページにすることです。 setTimeout(非同期() => { const テキスト = navigator.clipboard.readText() を待機します。 console.log(テキスト); }, 2000); 上記のコードを開発者ツールに貼り付けて実行した後、Web ページのページ ウィンドウをすばやくクリックして現在のページにすると、エラーは報告されなくなります。 3. クリップボードオブジェクトClipboard オブジェクトは、クリップボードの読み取りと書き込みを行う 4 つのメソッドを提供します。これらはすべて Promise オブジェクトを返す非同期メソッドです。 3.1 クリップボード.readText()Clipboard.readText() メソッドは、クリップボード内のテキスト データをコピーするために使用されます。 ドキュメント本体にイベントリスナーを追加します( 'クリック'、 非同期(e)=> { const テキスト = navigator.clipboard.readText() を待機します。 console.log(テキスト); } ) 上記の例では、ユーザーがページをクリックすると、クリップボード内のテキストが出力されます。このとき、ブラウザにダイアログ ボックスが表示され、スクリプトがクリップボードを読み取ることを許可するかどうかをユーザーに尋ねることに注意してください。 ユーザーが同意しない場合、スクリプトはエラーを報告します。このとき、エラーを処理するために try...catch 構造を使用できます。 非同期関数 getClipboardContents() { 試す { const テキスト = navigator.clipboard.readText() を待機します。 console.log('貼り付けられたコンテンツ: ', text); } キャッチ (エラー) { console.error('クリップボードの内容の読み取りに失敗しました: ', err); } } 3.2 クリップボード.read()Clipboard.read() メソッドは、クリップボード内のデータ (テキスト データまたはバイナリ データ (画像など)) をコピーするために使用されます。この方法ではユーザーからの明示的な許可が必要です。 このメソッドは Promise オブジェクトを返します。オブジェクトの状態が解決されると、配列を取得できます。配列の各メンバーは ClipboardItem オブジェクトのインスタンスです。 非同期関数 getClipboardContents() { 試す { const clipboardItems = navigator.clipboard.read() を待機します。 for (const clipboardItem of clipboardItems) { for (clipboardItem.typesのconst型) { const blob = clipboardItem.getType(type); を待機します。 console.log(URL.createObjectURL(blob)); } } } キャッチ (エラー) { コンソールエラー(err.name、err.message); } } ClipboardItem オブジェクトは、単一のクリッピング項目を表します。各クリッピング項目には、ClipboardItem.types プロパティと ClipboardItem.getType() メソッドがあります。 ClipboardItem.types プロパティは、クリップボード項目で使用可能な MIME タイプをメンバーとする配列を返します。たとえば、クリップボード項目を HTML 形式またはプレーン テキスト形式で貼り付けることができる場合、2 つの MIME タイプ (text/html と text/plain) が存在します。 ClipboardItem.getType(type) メソッドは、クリップボード項目のデータを読み取るために使用され、Promise オブジェクトを返します。このメソッドは、クリップ アイテムの MIME タイプをパラメータとして受け入れ、そのタイプのデータを返します。このパラメータは必須です。指定しないと、エラーが報告されます。 3.3 クリップボード.writeText()Clipboard.writeText() メソッドは、テキスト コンテンツをクリップボードに書き込むために使用されます。 ドキュメント本体にイベントリスナーを追加します( 'クリック'、 非同期(e)=> { navigator.clipboard.writeText('Yo') を待ちます。 } ) 上記の例は、ユーザーが Web ページをクリックした後、スクリプトがテキスト データをクリップボードに書き込むことを示しています。 このメソッドはユーザーの許可を必要としませんが、エラーを防ぐために try...catch 内に配置するのが最適です。 非同期関数 copyPageUrl() { 試す { navigator.clipboard.writeText(location.href) を待機します。 console.log('ページURLがクリップボードにコピーされました'); } キャッチ (エラー) { console.error('コピーに失敗しました: ', err); } } 3.4 クリップボード.write()Clipboard.write() メソッドは、テキスト データまたはバイナリ データなど任意のデータをクリップボードに書き込むために使用されます。 このメソッドは、クリップボードに書き込まれるデータを表す ClipboardItem インスタンスをパラメーターとして受け入れます。 試す { const imgURL = 'https://dummyimage.com/300.png'; const data = await fetch(imgURL); const blob = data.blob() を待機します。 ナビゲータ.クリップボード.書き込み([ 新しいクリップボードアイテム({ [blob.type]: ブロブ }) ]); console.log('画像をコピーしました。'); } キャッチ (エラー) { コンソールエラー(err.name、err.message); } 上記の例では、スクリプトは画像をクリップボードに書き込みます。 Chrome は現在 PNG 形式の画像の書き込みのみをサポートしていることに注意してください。 ClipboardItem() は、ブラウザによってネイティブに提供されるコンストラクターで、ClipboardItem インスタンスを生成するために使用されます。これは、オブジェクトをパラメーターとして受け入れます。オブジェクトのキー名はデータの MIME タイプであり、キー値はデータそのものです。 次の例では、同じクリップ項目の値を複数の形式でクリップボードに書き込みます。1 つはテキスト データ、もう 1 つはバイナリ データで、さまざまな場面で貼り付けられるようにします。 関数コピー() { const image = await fetch('kitten.png'); const text = new Blob(['かわいい眠っている子猫'], {type: 'text/plain'}); const item = 新しいクリップボードアイテム({ 'text/plain': テキスト、 'image/png': 画像 }); navigator.clipboard.write([item]) を待機します。 } 4. イベントのコピー、イベントの切り取りユーザーがクリップボードにデータを入れると、コピー イベントがトリガーされます。 次の例では、ユーザーがクリップボードに入力したテキストを大文字に変換します。 定数ソース = document.querySelector('.source'); source.addEventListener('コピー', (イベント) => { 定数選択 = document.getSelection(); イベント.クリップボードデータ.setData('text/plain', 選択.toString().toUpperCase()); イベントをデフォルトにしない(); }); 上記の例では、イベント オブジェクトの clipboardData プロパティにクリップボード データが含まれています。以下のプロパティとメソッドを持つオブジェクトです。
次の例では、ユーザーのコピー操作をインターセプトし、指定されたコンテンツをクリップボードに格納します。 定数クリップボードアイテム = []; document.addEventListener('コピー', async (e) => { e.preventDefault(); 試す { クリップボードアイテムを [] にします。 (e.clipboardData.items の定数項目) { if (!item.type.startsWith('image/')) { 続く; } クリップボードアイテム.push() 新しいクリップボードアイテム({ [アイテム.タイプ]: アイテム、 }) ); navigator.clipboard.write(clipboardItems); を待機します。 console.log('画像をコピーしました。'); } } キャッチ (エラー) { コンソールエラー(err.name、err.message); } }); 上記の例では、e.preventDefault() を使用してクリップボードのデフォルト操作をキャンセルし、スクリプトがコピー操作を引き継ぎます。 カットイベントは、ユーザーがカット操作を実行したときにトリガーされます。処理はコピーイベントとまったく同じで、カットデータは Event.clipboardData プロパティから取得されます。 5. イベントを貼り付けるユーザーがクリップボードのデータを使用して貼り付けると、貼り付けイベントがトリガーされます。 次の例では、貼り付け操作をインターセプトし、スクリプトを使用してクリップボードからデータを取得します。 document.addEventListener('貼り付け', 非同期(e) => { e.preventDefault(); const テキスト = navigator.clipboard.readText() を待機します。 console.log('貼り付けられたテキスト: ', text); }); 以上が、JS が Clipboard API を使用してクリップボードを操作する方法の詳細です。JS がクリップボードを使用する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: インターネット接続なしでLinux Centos7にアプリケーションをインストールする方法の詳細な説明
>>: MySQL 8.0.11 のインストールと設定方法のグラフィックチュートリアル
この問題に関して、オンライン リソースをたくさん見つけました。ここにいくつかの方法を示します。コード...
思いつきで、小さなボールが跳ね返るケーススタディを書いてみました。具体的な内容は以下のとおりです。主...
目次質問再生暗黙的な変換要約する参照する質問仕事中、1 つの SQL クエリ ステートメントのみを実...
問題の説明Tencent Cloud CentOS7にnginxをインストールするsudo yum ...
目次概要1. スタックとヒープ2. 変数オブジェクトと基本データ型3. 参照データ型とヒープメモリメ...
目次1. オプションの連鎖2. NULL値の結合3. 再帰型エイリアス4. アサーション署名5. P...
この記事では、例を使用して、MYSQL データベース テーブル構造を最適化する方法を説明します。ご参...
RFC793 ドキュメントの SYN フラグを持つプロセス パケットはデータを伝送できません。つま...
Mac で開発されたプロジェクトがあり、パッケージ npm i がインストールされており、すべて正常...
序文この記事では、私が手動で実装したフロントエンドの一般的な SMS 認証コード入力コンポーネントと...
最近、モバイル ページを開発しているときに、ページの幅が 100% の場合、高さは幅の半分になり、携...
スプライト:以前は、各画像リソースは独立した画像でした。ブラウザが Web サイト内のさまざまな W...
質問画像とテキストのシームレスなスクロールは、一般的に携帯電話では良い効果をもたらしますが、一部のモ...
[mysql] replace の使用方法 (フィールドの内容の一部を置き換える) [mysql]...
モバイル側では、フレックスレイアウトが非常に便利です。デバイスの幅に応じてコンテナの幅を自動的に調整...