web-dev-qa-db-ja.com

contenteditableで貼り付けイベントを検出します

コンテンツの編集可能なdivが与えられます。貼り付けイベントを検出し、貼り付けが挿入されないようにして、貼り付けを傍受してサニタイズしてテキストのみを含めるにはどうすればよいですか？

また、ペースト+サニタイズが完了した後にフォーカスを失いたくありません。

javascriptjqueryhtmlcontenteditable
27
Rachela Meadows

更新：

すべての主要なブラウザで、貼り付けイベントでクリップボードデータにアクセスできるようになりました。新しいブラウザの例については Nico Burnsの回答 を参照してください。古いブラウザをサポートする必要がある場合は Tim Downの回答 も確認してください。

Divで onPaste イベントをリッスンして、貼り付けを検出できます。貼り付けを無効にするだけの場合は、そのリスナーからevent.preventDefault()を呼び出すことができます。

ただし、onPasteイベントでは貼り付けられたコンテンツにアクセスできないため、貼り付けられたコンテンツをキャプチャするのは少し難しいです。これを処理する通常の方法は、onPasteイベントハンドラーから次のことを行うことです。

  • ダミーのdivを作成し、ウィンドウの境界の外側に配置して、訪問者に表示されないようにします
  • このdivにフォーカスを移動します
  • setTimeout(sanitize, 0)を使用してサニタイザーメソッドを呼び出します

そしてあなたの消毒方法から：

  • ダミーdivを見つけてその内容を取得する
  • hTMLをサニタイズし、divを削除します
  • フォーカスを元のdivに戻します
  • サニタイズされたコンテンツを元のdivに挿入します
23
dcro