chrome setSelectionRange() ne fonctionne pas dans oninput gestionnaire

Je suis en train de travailler avec certains d'auto-complétion de code. setSelectionRange() est utilisé pour sélectionner le texte à été achevé en oninput gestionnaire d'événement. Il fonctionne au moins dans Firefox 14, mais pas dans Chrome(6, 17).

Simplifié extrait de code montrant le problème est comme ceci:

<input type='text' oninput='select()' />
function select(e){
    var s = this.value;
    if (s.length)
        this.setSelectionRange(s.length-1, s.length);
}

J'ai débogué le code de chrome, et il s'avère que le texte a été sélectionné à la première à droite après le setSelectionRange() été exécuté, mais la sélection a disparu plus tard.

Si je la lie le gestionnaire onclick au lieu de oninput, comme ceci:

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

puis les deux navigateurs, beau travail.

Quelqu'un peut me donner des indices pour faire le travail de sélection dans Chrome?

InformationsquelleAutor bigbug | 2012-07-30
  1. 14

    Il y a quelques problèmes avec votre code, à savoir que les paramètres passés dans la select() fonction sont mauvais: this sera window et e ne sera pas défini. Aussi, à l'aide de select() comme un nom de fonction à l'intérieur de la oninput attributs sont les causes d'un problème, car sélectionnez permettra de résoudre à l' select() méthode de l'entrée elle-même. Une meilleure approche consiste généralement à définir le gestionnaire d'événements dans le script plutôt que par l'intermédiaire d'un gestionnaire d'événement attribut.

    Cependant, le problème persiste même après la correction de ces problèmes. Éventuellement le input événement se déclenche avant que le navigateur a déplacé le curseur dans google Chrome. Une solution simple serait d'utiliser une minuterie, même si c'est sous-optimal car il y a une possibilité à l'utilisateur sera en mesure à l'entrée d'un autre personnage avant que la minuterie se déclenche.

    Démo: 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>
    • Les travaux de cette. Je me demande pourquoi la plupart des moteurs de recherche de recherche, de suggestion, d'afficher uniquement les candidats dans le droplist, mais ne jamais se terminer la saisie de l'utilisateur et sélectionnez l'achèvement des travaux. Peut-être qu'il a quelque chose à voir avec mon problème.
    • La raison pour laquelle cela ne fonctionne pas de la bonne façon en Chrome (sans fixer un délai d'attente) c'est parce que un Chrome bug qui a été actif pendant plus de trois ans maintenant: code.google.com/p/chromium/issues/detail?id=32865
    • depuis plus d'un an, j'ai revisité un morceau de code seulement à renoncer quand il ne serait pas travailler et avancer sur d'autres choses. Une telle solution simple...frustrant.
    InformationsquelleAutor Tim Down
  2. 0

    JS:

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

    HTML:

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

    InformationsquelleAutor Юрий Светлов