chrome setSelectionRange() funktioniert nicht in oninput handler

Question

Ich arbeite mit einigen Auto-Vervollständigungscode. setSelectionRange() wird verwendet, um den Text auszuwählen, der in oninput Event-Handler abgeschlossen wurde. Es funktioniert zumindest in Firefox 14, aber nicht in Chrome (6, 17).

Simplified Code-Snippet, das Problem demonstriert ist wie folgt:

<input type='text' oninput='select()' /> 

function select(e){ 
    var s = this.value; 
    if (s.length) 
     this.setSelectionRange(s.length-1, s.length); 
} 

ich den Code in Chrom debuggt, und es stellt sich heraus, dass der Text zunächst rechts ausgewählt wurde, nachdem die setSelectionRange() ausgeführt worden , aber die Auswahl verschwand später.

Wenn ich binden den Handler zu onclick statt oninput, wie folgt aus:

<input type='text' onclick='select()' /> 

dann beide Browser funktionieren.

Kann mir bitte jemand einen Hinweis geben, damit die Auswahl in Chrome funktioniert?

Answer 1

Es gibt einige Probleme mit Ihrem Code, nämlich, dass die übergebenen Parameter in die select() Funktion falsch sind: thiswindow sein und e undefiniert. Außerdem verursacht die Verwendung von select() als Funktionsname innerhalb der oninput-Attribute ein Problem, da Select auf die select()-Methode der Eingabe selbst aufgelöst wird. Ein besserer Ansatz besteht normalerweise darin, den Ereignishandler im Skript anstatt über ein Ereignishandlerattribut zu setzen.

Das Problem besteht jedoch auch nach der Behebung dieser Probleme. Möglicherweise wird das Ereignis input ausgelöst, bevor der Browser das Caret in Chrome verschoben hat. Eine einfache Problemumgehung wäre die Verwendung eines Timers, obwohl dies nicht optimal ist, da es möglich ist, dass der Benutzer ein anderes Zeichen eingeben kann, bevor der Timer ausgelöst wird.

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

Code:

<input type="text" oninput="selectText(this)"> 

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