立即替換contenteditable文本

我想添加一些HTML作爲用戶輸入一個contenteditable東西。例如，立即替換contenteditable文本

$('body') 
    .delegate('div[contenteditable=true]', 'blur keyup paste', 
    function(){ 
     var html = this.innerHTML; 
     html.replace("a", "b"); 
     this.innerHTML = html; 
    });

對於其中一個，這似乎並不代替任何東西。二，我得到一個奇怪的問題，我不能再輸入到contenteditable div中。我檢查了在div上觸發的事件，沒有發生「模糊」事件。我似乎有div突出顯示，但我必須再次點擊該div鍵入任何內容。我在這裏錯過了什麼？

來源

2010-11-13 Drew

如果您希望允許用戶選擇事物並使其成爲粗體/斜體（或者在用戶的插入點標記所在的位置插入HTML塊），則需要使用document.execCommand。 Mozilla網站有documentation on this。

來源

2010-11-13 02:06:30 PleaseStand

對於第一部分，問題是JavaScript中字符串的replace()方法返回一個新字符串，並且不會影響原始字符串。你需要的是：

html = html.replace("a", "b");

對於第二個問題，這個問題可能是設置元素的innerHTML財產破壞並重新創建該元素中的整個DOM樹，因爲選擇或插入符載的事實在那個不再存在的DOM樹中，瀏覽器必須做些事情來恢復。我的猜測是你正在測試的瀏覽器只是清除選擇。

來源

2010-11-13 01:57:56

是的，我已經想更換使用這種方式，謝謝指點出來。當調用innerHTML不確定什麼時，DOM樹會發生什麼，但顯然他們不打算按照我的方式使用它。 – Drew 2010-11-13 03:10:14

與類似問題的戰鬥：我需要突出contenteditable一些特殊字符。例如，突出顯示& nbsp;有紅色背景。所以我正在做類似

elem.innerHTML = elem.innerHTML.replace('&nbsp;', '<span class="highlight">&nbsp;</span>');

當然，瀏覽器會重新創建elem（重繪它），elem會鬆散焦點和插入位置。如果您將在FireFox中的鍵入/輸入事件上打印elem.innerHTML，您會看到它將特殊的< br>粘貼爲標記。我正在嘗試使用相同的技巧：使用Range對象將標記粘貼到插入位置，然後我將替換爲& nbsp; （在這一點上，我放鬆焦點），然後我得到標記選擇它並刪除。

見範圍API文檔https://developer.mozilla.org/en-US/docs/Web/API/range

來源

2013-08-27 08:21:15 Freebin

立即替換contenteditable文本

回答

相關問題