Comment obtenez-vous la position du curseur dans une zone de texte?

S'il n'y a pas de sélection, vous pouvez utiliser les propriétés .selectionStart ou .selectionEnd (sans sélection, elles sont égales).

 var cursorPosition = $('#myTextarea').prop("selectionStart"); 

Notez que cela n'est pas pris en charge dans les anciens navigateurs, notamment IE8-. Là vous devrez travailler avec des plages de texte, mais c'est une frustration complète.

Je crois qu'il existe une bibliothèque quelque part consacrée à l'obtention et à la définition de sélections / positions de curseur dans les éléments d'entrée. Je ne me souviens pas de son nom, mais il semble y avoir des dizaines d'articles sur ce sujet.

J'ai fait beaucoup de travail à ce sujet et j'ai affiché plusieurs fois une fonction pour obtenir la position du carnet / sélection dans les zones de texte sur Déploiement de la pile. Contrairement à presque tous les autres codes pour y parvenir, cela fonctionne correctement avec les sauts de ligne dans IE <9.

Voici une question d'exemple avec un peu de fond:

Existe-t-il un substitut approuvé par Internet Explorer pour la sélectionStart et selectionEnd?

Et voici un lien vers un plug-in jQuery que j'ai écrit qui inclut cette fonction et d'autres fonctions de la zone de texte liées à la sélection:

http://code.google.com/p/rangyinputs/

Voici une fonction de navigateur croisé que j'ai dans ma bibliothèque standard:

 function getCursorPos(input) { if ("selectionStart" in input && document.activeElement == input) { return { start: input.selectionStart, end: input.selectionEnd }; } else if (input.createTextRange) { var sel = document.selection.createRange(); if (sel.parentElement() === input) { var rng = input.createTextRange(); rng.moveToBookmark(sel.getBookmark()); for (var len = 0; rng.compareEndPoints("EndToStart", rng) > 0; rng.moveEnd("character", -1)) { len++; } rng.setEndPoint("StartToStart", input.createTextRange()); for (var pos = { start: 0, end: len }; rng.compareEndPoints("EndToStart", rng) > 0; rng.moveEnd("character", -1)) { pos.start++; pos.end++; } return pos; } } return -1; } 

Utilisez-le dans votre code comme ceci:

 var cursorPosition = getCursorPos($('#myTextarea')[0]) 

Voici sa fonction complémentaire:

 function setCursorPos(input, start, end) { if (arguments.length < 3) end = start; if ("selectionStart" in input) { setTimeout(function() { input.selectionStart = start; input.selectionEnd = end; }, 1); } else if (input.createTextRange) { var rng = input.createTextRange(); rng.moveStart("character", start); rng.collapse(); rng.moveEnd("character", end - start); rng.select(); } } 

http://jsfiddle.net/gilly3/6SUN8/

La fonction ci-dessus peut être améliorée (IE7 renvoie la mauvaise position pour les zones de texte multi-lignes)

Remplacer simplement:

 rc.text.length 

avec:

 rc.text.split("\n").join("").length 

Et ça marche sur ie7 aussi 🙂

Voici le code pour obtenir le numéro de ligne et la position de la colonne

 function getLineNumber(tArea) { return tArea.value.substr(0, tArea.selectionStart).split("\n").length; } function getCursorPos() { var me = $("textarea[name='documenttext']")[0]; var el = $(me).get(0); var pos = 0; if ('selectionStart' in el) { pos = el.selectionStart; } else if ('selection' in document) { el.focus(); var Sel = document.selection.createRange(); var SelLength = document.selection.createRange().text.length; Sel.moveStart('character', -el.value.length); pos = Sel.text.length - SelLength; } var ret = pos - prevLine(me); alert(ret); return ret; } function prevLine(me) { var lineArr = me.value.substr(0, me.selectionStart).split("\n"); var numChars = 0; for (var i = 0; i < lineArr.length-1; i++) { numChars += lineArr[i].length+1; } return numChars; } 

TArea est l'élément DOM de la zone de texte

La fonction getCursorPos () renvoie la position du curseur dans GWT

  TextArea content = new TextArea(); content.getCursorPos();