Définir la position du curseur du clavier dans la zone de texte html

Question

Quelqu'un sait-il comment déplacer le curseur du clavier dans une zone de texte à une position particulière ?

Par exemple, si une zone de texte (c'est-à-dire un élément de saisie, et non une zone de texte) contient 50 caractères et que je souhaite positionner le signe d'insertion avant le caractère 20, comment dois-je procéder ?

Ceci est en différenciation de cette question : jQuery Définir la position du curseur dans la zone de texte qui requiert jQuery.

Answer 1

Extrait du livre de Josh Stodola. Définir la position du curseur du clavier dans une zone de texte ou une zone de texte avec Javascript

Une fonction générique qui vous permettra d'insérer le signe d'insertion à n'importe quelle position d'une zone de texte ou d'une zone de texte que vous souhaitez :

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

Le premier paramètre attendu est l'ID de l'élément sur lequel vous souhaitez insérer le curseur du clavier. Si l'élément est introuvable, rien ne se passera (évidemment). Le deuxième paramètre est l'indice de position de la carette. Un zéro placera le caret du clavier au début. Si vous passez un nombre plus grand que le nombre de caractères dans la valeur de l'élément, le curseur du clavier sera placé à la fin.

Testé sur IE6 et plus, Firefox 2, Opera 8, Netscape 9, SeaMonkey et Safari. Malheureusement sur Safari, il ne fonctionne pas en combinaison avec l'événement onfocus).

Exemple d'utilisation de la fonction ci-dessus pour forcer le curseur du clavier à sauter à la fin de toutes les zones de texte de la page lorsqu'elles reçoivent le focus :

function addLoadEvent(func) {
    if(typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        if(func) {
            var oldLoad = window.onload;

            window.onload = function() {
                if(oldLoad)
                        oldLoad();

                func();
            }
        }
    }
}

// The setCaretPosition function belongs right here!

function setTextAreasOnFocus() {
/***
 * This function will force the keyboard caret to be positioned
 * at the end of all textareas when they receive focus.
 */
    var textAreas = document.getElementsByTagName('textarea');

    for(var i = 0; i < textAreas.length; i++) {
        textAreas[i].onfocus = function() {
            setCaretPosition(this.id, this.value.length);
        }
    }

    textAreas = null;
}

addLoadEvent(setTextAreasOnFocus);

Answer 2

Le lien dans la réponse est cassé, celui ci devrait fonctionner (tous les crédits vont à blog.vishalon.net ) :

http://snipplr.com/view/5144/getset-cursor-in-html-textarea/

Au cas où le code se perdrait à nouveau, voici les deux fonctions principales :

function doGetCaretPosition(ctrl)
{
 var CaretPos = 0;

 if (ctrl.selectionStart || ctrl.selectionStart == 0)
 {// Standard.
  CaretPos = ctrl.selectionStart;
 }
 else if (document.selection)
 {// Legacy IE
  ctrl.focus ();
  var Sel = document.selection.createRange ();
  Sel.moveStart ('character', -ctrl.value.length);
  CaretPos = Sel.text.length;
 }

 return (CaretPos);
}

function setCaretPosition(ctrl,pos)
{
 if (ctrl.setSelectionRange)
 {
  ctrl.focus();
  ctrl.setSelectionRange(pos,pos);
 }
 else if (ctrl.createTextRange)
 {
  var range = ctrl.createTextRange();
  range.collapse(true);
  range.moveEnd('character', pos);
  range.moveStart('character', pos);
  range.select();
 }
}

Answer 3

Puisque j'avais vraiment besoin de cette solution, et que la solution de base typique ( mettre au point l'entrée - puis mettre la valeur égale à elle-même ) ne fonctionne pas sur tous les navigateurs J'ai passé du temps à tout modifier et à éditer pour que ça marche. En s'appuyant sur @ kd7 Voici ce que j'ai trouvé.

Profitez-en ! Fonctionne dans IE6+, Firefox, Chrome, Safari, Opera

Technique de positionnement du curseur sur plusieurs navigateurs (exemple : déplacement du curseur vers la FIN)

// ** USEAGE ** (returns a boolean true/false if it worked or not)
// Parameters ( Id_of_element, caretPosition_you_want)

setCaretPosition('IDHERE', 10); // example

La viande et les pommes de terre sont essentiellement @ kd7 setCaretPosition, la modification la plus importante étant la suivante if (el.selectionStart || el.selectionStart === 0) dans firefox, le début de la sélection commence à 0 qui, dans le langage booléen, se transforme bien sûr en Faux, et c'est là que le problème se pose.

Dans le chrome, le plus gros problème était que le simple fait de le donner .focus() n'était pas suffisant (il sélectionnait tout le texte !) Nous avons donc défini la valeur de lui-même, à lui-même el.value = el.value; avant d'appeler notre fonction, et maintenant il a une prise & position avec l'entrée à utiliser sélectionDébut .

function setCaretPosition(elemId, caretPos) {
    var el = document.getElementById(elemId);

    el.value = el.value;
    // ^ this is used to not only get "focus", but
    // to make sure we don't have it everything -selected-
    // (it causes an issue in chrome, and having it doesn't hurt any other browser)

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        }

        else {
            // (el.selectionStart === 0 added for Firefox bug)
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            }

            else  { // fail city, fortunately this never happens (as far as I've tested) :)
                el.focus();
                return false;
            }
        }
    }
}

Answer 4

J'ai ajusté un peu la réponse de kd7 parce que elem.selectionStart sera évalué à false quand le selectionStart est incidemment 0.

function setCaretPosition(elem, caretPos) {
    var range;

    if (elem.createTextRange) {
        range = elem.createTextRange();
        range.move('character', caretPos);
        range.select();
    } else {
        elem.focus();
        if (elem.selectionStart !== undefined) {
            elem.setSelectionRange(caretPos, caretPos);
        }
    }
}

Answer 5

<!DOCTYPE html>
<html>
<head>
<title>set caret position</title>
<script type="application/javascript">
//<![CDATA[
window.onload = function ()
{
 setCaret(document.getElementById('input1'), 13, 13)
}

function setCaret(el, st, end)
{
 if (el.setSelectionRange)
 {
  el.focus();
  el.setSelectionRange(st, end);
 }
 else
 {
  if (el.createTextRange)
  {
   range = el.createTextRange();
   range.collapse(true);
   range.moveEnd('character', end);
   range.moveStart('character', st);
   range.select();
  }
 }
}
//]]>
</script>
</head>
<body>

<textarea id="input1" name="input1" rows="10" cols="30">Happy kittens dancing</textarea>

<p>&nbsp;</p>

</body>
</html>