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内容在内容更改后无法正常工作

回答

相关问题