ブラウザー間で JavaScript に貼り付けられたデータからプレーン テキストをインターセプトして抽出するにはどうすればよいですか?

JavaScript で貼り付けられたデータの検出と取得 (クロスブラウザ)

Web アプリケーションでは、多くの場合、データを取得する前にデータをキャプチャして前処理する必要があります。テキストエディタに貼り付けられます。これには、既存の書式設定を維持しながら、HTML タグなどの特定の要素を削除することが含まれる場合があります。ただし、従来の貼り付け後のサニタイズ手法では、以前のテキストの書式設定が破壊される可能性があります。

この課題に対処するために、最新のブラウザ API を利用して貼り付けイベントをインターセプトし、貼り付けられたデータを取得するソリューションを検討してみましょう:

解決策 #1: プレーンテキストの抽出 (Firefox 22 および最新)ブラウザ)

DataTransfer API をサポートするブラウザ (IE9、Firefox 22、Chrome、Safari、Edge など) の場合、次のアプローチにより、クリップボード データからプレーン テキストを選択的に抽出できます。

function handlePaste(e) {
  var clipboardData, pastedData;

  // Stop data actually being pasted into div
  e.stopPropagation();
  e.preventDefault();

  // Get pasted data via clipboard API
  clipboardData = e.clipboardData || window.clipboardData;
  pastedData = clipboardData.getData('Text');

  // Do whatever with pasteddata
  alert(pastedData);
}

document.getElementById('editableDiv').addEventListener('paste', handlePaste);

このソリューションは、e.clipboardData.getData('Text') メソッドを利用して、プレーン テキスト コンテンツを抽出します。貼り付けイベント中に転送されたデータ。

以上がブラウザー間で JavaScript に貼り付けられたデータからプレーン テキストをインターセプトして抽出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。