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

Est-ce que quelqu'un sait comment déplacer le curseur du clavier dans une zone de texte vers une position particulière?

Par exemple, si une zone de texte (par exemple un élément d'entrée, pas une zone de texte) contient 50 caractères et que je souhaite placer le curseur avant le caractère 20, comment procéder?

Ceci est différent de cette question: jQuery Définit la position du curseur dans la zone de texte , qui nécessite jQuery.

Extrait de la position du curseur du clavier de Josh Stodola dans une zone de texte ou zone de texte avec Javascript

Une fonction générique qui vous permettra d'insérer le curseur à 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 caret. Zéro mettra le curseur du clavier au début. Si vous passez un nombre plus grand que le nombre de caractères dans la valeur des éléments, cela placera le curseur du clavier à la fin.

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

Un 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'ils 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);

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 perd à 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();
 }
}

Étant donné que j'avais vraiment besoin de cette solution et que la solution de base typique ( concentrer l'entrée - puis définir la valeur égale à elle-même ) ne fonctionne pas entre les navigateurs , j'ai passé du temps à tout peaufiner et à modifier pour que cela fonctionne. En s'appuyant sur le code de @ kd7 , voici ce que j'ai trouvé.

Prendre plaisir! Fonctionne dans IE6 +, Firefox, Chrome, Safari, Opera

Technique de positionnement du curseur cross-browser (exemple: déplacement du curseur vers END)

// ** 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 est fondamentalement setCaretPosition de @ kd7 , le plus gros ajustement étant if (el.selectionStart || el.selectionStart === 0), dans Firefox, selectionStart commence à 0 , ce qui en booléen devient bien sûr False, donc ça cassait là.

Dans Chrome, le plus gros problème était que le donner .focus()ne suffisait pas (il continuait à sélectionner TOUT le texte!) Par conséquent, nous définissons la valeur de lui-même, à lui-même el.value = el.value;avant d'appeler notre fonction, et maintenant il a une prise et une position avec le entrée pour utiliser selectionStart .

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

J'ai ajusté un peu la réponse de kd7 car elem.selectionStart évaluera à false lorsque selectionStart est accessoirement 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);
        }
    }
}

J'ai trouvé un moyen simple de résoudre ce problème, testé dans IE et Chrome:

function setCaret(elemId, caret)
 {
   var elem = document.getElementById(elemId);
   elem.setSelectionRange(caret, caret);
 }

Passez l'identifiant de la zone de texte et la position du curseur à cette fonction.

Si vous avez besoin de concentrer une zone de texte et que votre seul problème est que tout le texte est mis en surbrillance alors que vous voulez que le curseur soit à la fin, alors dans ce cas spécifique, vous pouvez utiliser cette astuce pour définir la valeur de la zone de texte sur elle-même après la mise au point:

$("#myinputfield").focus().val($("#myinputfield").val());

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

function SetCaretEnd(tID) {
    tID += "";
    if (!tID.startsWith("#")) { tID = "#" + tID; }
    $(tID).focus();
    var t = $(tID).val();
    if (t.length == 0) { return; }
    $(tID).val("");
    $(tID).val(t);
    $(tID).scrollTop($(tID)[0].scrollHeight); }

Je fixerais les conditions comme ci-dessous:

function setCaretPosition(elemId, caretPos)
{
 var elem = document.getElementById(elemId);
 if (elem)
 {
  if (typeof elem.createTextRange != 'undefined')
  {
   var range = elem.createTextRange();
   range.move('character', caretPos);
   range.select();
  }
  else
  {
   if (typeof elem.selectionStart != 'undefined')
    elem.selectionStart = caretPos;
   elem.focus();
  }
 }
}