粘贴后IE9输入setSelectionRange（）不起作用

Question

I have to manually set the caret-position to 0 in an input-field (in the input-event). I need to support >= IE9. Even in IE9 this works ok as long as I do normal input (pressing keys on my keyboard). But as soon as I use copy&paste, the caret isn't set to the desired position (0).

Steps to reproduce:

1. Open IE in IE9-Mode
2. Open fiddle below
3. Type into the input-field (works ok, the caret gets set to 0)
4. Paste something into the input-field (fails, the caret gets set to the end of the pasted text)

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

Code

<input type="text" />

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

Answer 1

Funny. First I thought IE9 maybe would not fire the event on pasting, but it does. No idea why this would not work.

However, you could use the keyup event. This is definitely not as good as using input but will work in 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);
      }
});

To still be able to select text by keyboard, you'd have to exclude some keys.

Here is an updated Fiddle .

Update

Well, this still does not work if the user pastes text by using mouse and context menu. Happily IE knows the paste event. Unhappily there is no after paste event, so you'd end up using a 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);
});

Here is a Fiddle .