Chrome内容在编程改变内容后，对于输入元素无法正常工作 [英] In Chrome undo does not work properly for input element after contents changed programmatically

问题描述

在Chrome中，我注意到在元素的内容以编程方式更改后，撤消对输入元素无法正常工作。尽管我对不同浏览器的行为有所不同，但它们并没有Chrome那么糟糕。

  FF20 good 
 IE9 some支持（当输入失去焦点时，撤销堆栈清除）
 Safari5一些支持（当输入丢失焦点时，撤销堆栈清除）
 Chrome26不可靠
  

例如，一个修剪空格的脚本（请参阅下面的jsfiddle） b
$ b

• 键入一些空格在hello！之前，
  
• 点击输入元素外部
  
• 点击输入元素并按下Ctrl-Z

现在文字消失了（在Chome中）

jsfiddle here

 < input type =text id =input1value =hello！> 
 
 document.getElementById（input1）。addEventListener（'blur'，function（evt）{elementLosesFocus（evt，this）;}，false）; 
 
 function elementLosesFocus（evt，caller）
 {
 caller.value = caller.value.trim（）; 
} 
  

我认为我能希望的最好的方法是以某种方式清除当输入失去焦点时撤消输入的历史记录（如IE和Safari）。 该字段的状态，而是每个撤销/重做的差异或一组增量。它占用较少的内存，但会导致你正在处理的错误。

您可以使用来有效地模拟用户将值粘贴到字段中， document.execCommand（insertText，false，要插入的文本）; 。

您的特殊情况：

1. 首先，将该字段的值保存到变量中。 var temp = caller.value;


2. 接下来，清除该字段的值或将其selectionStart设置为0，并将selectionEnd设置为该字段的长度。通过这种方式，模拟粘贴将替换该字段的内容。


3. 接下来，确保该字段具有焦点。 caller.focus（）;


4. 最后，模拟用户粘贴到修改后的值中。 document.execCommand（insertText，false，temp.trim（））;

我在另一个SO问题中找到了此解决方案， https://stackoverflow.com/a/10345596/1021426

In Chrome, I noticed that undo does not work properly for input element after the contents of the element has been changed programmatically. Although I get different behaviours for different browsers, they're not as bad as 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

For example, a script that trims spaces (see also jsfiddle below)

• type some spaces before "hello!",
• click outside the input element
• click on the input element and press Ctrl-Z

now the text is gone (in 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();
}

I think the best thing I can hope for is a method to somehow clear the undo history of the input when it loses focus (as is the case with IE and Safari).

解决方案

Chrome doesn't store the field's states, but rather a diff or set of deltas for each undo/redo. It takes less memory, but causes the bug you're dealing with.

You can effectively simulate the user pasting a value into the field by using document.execCommand("insertText", false, "text to insert");.

For your particular case:

1. First, save the field's value to a variable. var temp = caller.value;
2. Next, clear the field's value or set its selectionStart to 0 and selectionEnd to the field's length. This way a simulated paste replaces the field's contents.
3. Next, make sure the field has the focus. caller.focus();
4. Finally, simulate the user pasting in the modified value. document.execCommand("insertText", false, temp.trim());

I found this solution in another SO question, https://stackoverflow.com/a/10345596/1021426

这篇关于Chrome内容在编程改变内容后，对于输入元素无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！