chrome setSelectionRange() non funziona con il gestore oninput

Question

Sto lavorando con un codice di completamento automatico. setSelectionRange() viene utilizzato per selezionare il testo completato nel gestore eventi oninput. Funziona almeno in Firefox 14, ma non in Chrome (6, 17).

codice semplificato frammento di dimostrare il problema è come questo:

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

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

ho il debug del codice in cromo, e si scopre che il testo è stato selezionato alla prima a destra dopo il setSelectionRange() stato eseguito , ma la selezione è scomparsa in seguito.

Se mi legano il gestore per onclick invece di oninput, in questo modo:

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

poi entrambi i browser funzionano bene.

Qualcuno può darmi qualche indizio per far funzionare la selezione in Chrome?

Answer 1

Ci sono alcuni problemi con il codice, vale a dire che i parametri passati alla funzione select() sono sbagliati: this sarà window e sarà indefinito e. Inoltre, l'uso di select() come nome di funzione all'interno degli attributi oninput causa un problema poiché select si risolverà con il metodo select() dell'input stesso. Un approccio migliore consiste in genere nell'impostare il gestore di eventi nello script piuttosto che tramite un attributo del gestore di eventi.

Tuttavia, il problema esiste anche dopo aver risolto questi problemi. Probabilmente l'evento input si attiva prima che il browser abbia spostato il punto di inserimento in Chrome. Una soluzione semplice sarebbe quella di utilizzare un timer, anche se questo è non ottimale perché c'è la possibilità che l'utente possa inserire un altro personaggio prima che il timer scocchi.

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

Codice:

<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>