javascript - 粘贴后 IE9 输入 setSelectionRange() 无效

Question

我必须在输入字段中(在输入事件中)手动将插入符位置设置为 0。我需要支持 >= IE9。即使在 IE9 中，只要我进行正常输入(按键盘上的键)，它就可以正常工作。但是，一旦我使用复制和粘贴，插入符号就不会设置到所需的位置 (0)。

重现步骤:

1. 在 IE9 模式下打开 IE
2. 打开下面的 fiddle
3. 在输入字段中输入(工作正常，插入符号设置为 0)
4. 将内容粘贴到输入字段(失败，插入符号设置为粘贴文本的末尾)

fiddle :https://jsfiddle.net/wv61t7k5/7/

代码

<input type="text" />

document.querySelector('input').addEventListener('input', function(){
  this.setSelectionRange(0,0);
});

Answer 1

有趣。首先我认为 IE9 可能不会在粘贴时触发事件，但它会触发。不知道为什么这行不通。

但是，您可以使用 keyup 事件。这绝对不如使用 input 好，但可以在 IE9 中使用。

document.querySelector('input').addEventListener('keyup', function(e){
    if (e.key != 'Left' && e.key != 'Right' &&
      e.key != 'Shift' && e.key != 'Control') {
            this.setSelectionRange(0,0);
      }
});

要仍然能够通过键盘选择文本，您必须排除一些键。

这是一个 updated Fiddle .

更新

嗯，如果用户使用鼠标和上下文菜单粘贴文本，这仍然不起作用。幸好 IE 知道 paste 事件。不幸的是没有粘贴后事件，所以你最终会使用 timeout:

document.querySelector('input').addEventListener('input', function(e){
    this.setSelectionRange(0,0);
});
document.querySelector('input').addEventListener('paste', function() {
    var that = this;
    setTimeout(function() {
        that.setSelectionRange(0,0);
  }, 100);
});

这是一个Fiddle .