Contenteditable Div 内のコンテンツの変更を確実に検出するにはどうすればよいですか?

contenteditable 変更イベント: 探索

contenteditable 属性を使用して div 内のコンテンツの変更を追跡する機能により、ユーザー エクスペリエンスが向上します。ウェブアプリケーション。ただし、従来の onchange イベントがないことが課題となります。

キー イベントとフォールバック

1 つのアプローチは、編集可能な要素内のキー イベントを監視することです。 Keydown イベントと keypress イベントは、コンテンツが変更される前に発生します。ただし、これはすべてのシナリオをカバーしているわけではありません。ユーザーは編集メニュー オプション (切り取り、コピー、貼り付け) やドラッグ アンド ドロップ操作を使用してテキストを変更できるためです。

入力イベントの利用< ;/h3>

最近では、HTML5 入力イベントが、contenteditable 要素の変更を監視するための長期的なソリューションとして登場しました。このイベントは現在、Firefox や WebKit/Blink などの最新のブラウザでサポートされていますが、IE ではサポートされていません。

実装例 (入力イベント)

次の JavaScript を検討してください。コード スニペット:

document.getElementById("editor").addEventListener("input", function() {
    console.log("input event fired");
}, false);

HTML マークアップと組み合わせると、 ID「editor」を持つ contenteditable div を作成します。この div のコンテンツが変更されると、「input」イベントがトリガーされ、コンソールに「input events fired」が出力されます。

<div contenteditable="true">

これらの手法を利用することで、開発者は行われた変更を効果的にキャプチャして対応できます。 contenteditable 要素に追加し、ユーザー エクスペリエンスを強化し、Web アプリケーション内の高度な機能を有効にします。

以上がContenteditable Div 内のコンテンツの変更を確実に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。