Chrome Setselectionrange() Not Work In Oninput Handler

I'm working with some auto-completion code. setSelectionRange() is used to select text been completed in oninput event handler. It works at least in Firefox 14, but not in Chrome(6

Solution 1:

There are some problems with your code, namely that the parameters passed into the select() function are wrong: this will be window and e will be undefined. Also, using select() as a function name within the oninput attributes causes a problem because select will resolve to the select() method of the input itself. A better approach is usually to set the event handler in script rather than via an event handler attribute.

However, the problem exists even after correcting these issues. Possibly the input event fires before the browser has moved the caret in Chrome. A simple workaround would be to use a timer, although this is sub-optimal because there's a possibility the user will be able to input another character before the timer fires.

Demo: http://jsfiddle.net/XXx5r/2/

Code:

<inputtype="text"oninput="selectText(this)"><scripttype="text/javascript">functionselectText(input) {
    var s = input.value;
    if (s.length) {
        window.setTimeout(function() {
            input.setSelectionRange(s.length-1, s.length);
        }, 0);
    }
}
</script>

Solution 2:

var $input = document.getElementById('my_id');
    
    $input.onfocus = function () {
       $input.setSelectionRange(0, 7);
    }
    $input.focus();
    
    

<inputtype='text'id='my_id'value="My text for example." />

Solution 3:

On Angular for example you can do this:

@ViewChild('input', { static: false }) inputElement: ElementRef;

focus(){    
    setTimeout(() => {
        this.inputElement.nativeElement.focus();
        this.inputElement.nativeElement.setSelectionRange(this.valueInput.length, this.valueInput.length);
    });
}

Solution 4:

I think setTimeout does not the best solution. You just need call event handler before use setSelectionRange. i use this:

e.currentTarget.value = previousValue;
onChange(e);
e.currentTarget.setSelectionRange(startPosition, endPosition);