如何可靠地檢測 Contenteditable Div 中的內容變更？

contenteditable 更改事件：探索

使用 contenteditable 屬性追蹤 div 中的內容變更的能力可以增強使用者體驗網路應用程式。然而，傳統 onchange 事件的缺失帶來了挑戰。

關鍵事件與後備

一種方法是監視可編輯元素內的關鍵事件。 Keydown 和 keypress 事件發生在內容被修改之前。然而，這並沒有涵蓋所有場景，因為使用者可以使用編輯選單選項（剪下、複製、貼上）和拖放操作來更改文字。

利用輸入事件

最近，HTML5 輸入事件已成為監控 contenteditable 元素變更的長期解決方案。目前，Firefox 和 WebKit/Blink 等現代瀏覽器支援此事件，但 IE 不支援。

範例實作（輸入事件）

考慮以下JavaScript程式碼片段：

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

與HTML 標記結合，它建立了一個contenteditable div ID“編輯”。當該 div 的內容被修改時，會觸發「input」事件，並在控制台上列印「input eventfired」。

<div contenteditable="true">

透過利用這些技術，開發人員可以有效地捕獲並回應所做的更改內容可編輯元素，增強用戶體驗並在 Web 應用程式中啟用高級功能。

以上是如何可靠地檢測 Contenteditable Div 中的內容變更？的詳細內容。更多資訊請關注PHP中文網其他相關文章！