Chrome內容在內容更改後無法正常工作

在Chrome中，我注意到在元素內容以編程方式更改後，撤消對輸入元素無效。雖然我針對不同的瀏覽器獲得了不同的行爲，但它們並沒有Chrome那麼糟糕。Chrome內容在內容更改後無法正常工作

FF20  good 
IE9  some support (undo stack cleared when input loses focus) 
Safari5 some support (undo stack cleared when input loses focus) 
Chrome26 unreliable

例如，修剪腳本空間（見的jsfiddle下文）

類型之前，「你好！」一些空間，
點擊輸入元素
點擊外輸入元素，然後按Ctrl-Z

現在文字消失了（在Chome）

jsfiddle here

<input type="text" id="input1" value="hello!"> 

document.getElementById("input1").addEventListener('blur', function(evt){elementLosesFocus(evt, this);}, false); 

function elementLosesFocus(evt, caller) 
{ 
    caller.value = caller.value.trim(); 
}

我想我能期待的最好的事情就是以某種方式清除輸入的撤銷歷史，當它失去焦點（如與IE和Safari的情況）的方法。

來源

2013-04-24 wubbewubbewubbe

Chrome不會存儲字段的狀態，而是每個撤消/重做的差異或一組增量。它佔用更少的內存，但會導致你正在處理的錯誤。

您可以使用document.execCommand("insertText", false, "text to insert");有效地模擬用戶將值粘貼到字段中。

對於你的具體情況：

首先，該字段的值保存到一個變量。 var temp = caller.value;
接下來，清除字段的值或將其selectionStart設置爲0，並將selectionEnd設置爲字段的長度。通過這種方式，模擬的粘貼替換了字段的內容。
接下來，確保該字段具有焦點。 caller.focus();
最後，在修改後的值中模擬用戶粘貼。 document.execCommand("insertText", false, temp.trim());

我發現了另一個問題，SO該解決方案，https://stackoverflow.com/a/10345596/1021426

來源

2014-11-19 22:33:18

這是黃金。謝謝！有大量的庫處理插入符，選擇和替換它們，但所有這些庫最終都使用'input.value'或'textarea.text'，這導致OP描述的撤銷問題。 – flu 2015-04-29 15:36:51

只需注意它不會在Firefox中工作。如果'document.execCommand'返回false，則需要直接回退到設置值（而不是通過粘貼文本）。查看Firefox中的錯誤：https：//bugzilla.mozilla.org/show_bug.cgi？id = 1220696 – Nux 2017-10-09 11:39:11

Chrome內容在內容更改後無法正常工作

回答

相關問題