Comment obtenir le signe de la colonne (pas de pixels) position dans un textarea, dans les personnages, depuis le début?

Comment obtenez-vous la position du curseur dans un <textarea> à l'aide de JavaScript?

Par exemple: This is| a text

Il doit retourner 7.

Comment voulez-vous obtenir le retour des chaînes entourant le curseur de sélection/?

E. g.: 'This is', '', ' a text'.

Si le mot “est” est mis en surbrillance, puis il serait de retour 'This ', 'is', ' a text'.

InformationsquelleAutor Restless Wanderer | 2008-11-04
  1. 173

    Avec Firefox, Safari (et les autres navigateurs basés sur Gecko), vous pouvez facilement utiliser textarea.selectionStart, mais pour IE qui ne fonctionne pas, alors vous aurez à faire quelque chose comme ceci:

    function getCaret(node) {
  if (node.selectionStart) {
    return node.selectionStart;
  } else if (!document.selection) {
    return 0;
  }

  var c = "
    function getCaret(node) {
if (node.selectionStart) {
return node.selectionStart;
} else if (!document.selection) {
return 0;
}
var c = "\001",
sel = document.selection.createRange(),
dul = sel.duplicate(),
len = 0;
dul.moveToElementText(node);
sel.text = c;
len = dul.text.indexOf(c);
sel.moveStart('character',-1);
sel.text = "";
return len;
}
    1"    ,
      sel = document.selection.createRange(),
      dul = sel.duplicate(),
      len = 0;

  dul.moveToElementText(node);
  sel.text = c;
  len = dul.text.indexOf(c);
  sel.moveStart('character',-1);
  sel.text = "";
  return len;
}

    (code complet ici)

    Moi aussi je vous recommande de vérifier le jQuery FieldSelection Plugin, il vous permet de le faire et bien plus encore...

    Edit: j'ai fait re-mise en œuvre le code ci-dessus: 

    function getCaret(el) { 
  if (el.selectionStart) { 
    return el.selectionStart; 
  } else if (document.selection) { 
    el.focus(); 

    var r = document.selection.createRange(); 
    if (r == null) { 
      return 0; 
    } 

    var re = el.createTextRange(), 
        rc = re.duplicate(); 
    re.moveToBookmark(r.getBookmark()); 
    rc.setEndPoint('EndToStart', re); 

    return rc.text.length; 
  }  
  return 0; 
}

    Vérifier un exemple ici.

    • Les petits plus de la CMS réponse. Quand à IE 7 ce code renvoie -1 si le dernier caractère est l'espace et le signe est d'après elle. Vérification de la valeur de retour fait le truc dans ce cas.
    • Cela ne fait pas de distinction entre signe positions lorsque le curseur est placé sur une ligne vide. Voir stackoverflow.com/questions/3053542/...
    • Cette réponse ne traite pas avec les lignes vides problème.
    • Vous pouvez également faire un qui définit la position du curseur?
    • Comment puis-je l'utiliser pour CONTENTEDITABLE div?
    • Salut, quelqu'un peut me dire quelles sont les versions minimales des différents navigateurs qui soutiendra le code ci-dessus?
    • Vous pourriez vouloir reformuler cette réponse un peu, Safari (and other Gecko based browsers) Semble impliquer que Safari utilise Gecko. Gecko est Mozilla moteur; Safari utilise WebKit.
    • curseur à la position 0 échouer le test if (el.selectionStart) { return el.selectionStart; }...
    • ... qui ne doivent pas vraiment d'importance car dans ce cas, la méthode renvoie correctement 0 de toute façon.

    InformationsquelleAutor CMS
  2. 57

    Mis À Jour Le 5 Septembre 2010

    De voir que tout le monde semble l'avoir dirigé ici pour ce problème, je vais ajouter ma réponse à une question similaire, qui contient le même code que cette réponse, mais avec un arrière-plan pour ceux qui sont intéressés:

    IE document.sélection.createRange ne comprend pas de leader ou suiveur de lignes vides

    De compte pour la fuite des sauts de ligne est délicate dans IE, et je n'ai pas vu de solution qui fait cela correctement, y compris toutes les autres réponses à cette question. Il est cependant possible, à l'aide de la fonction suivante, qui va vous retourner le début et la fin de la sélection (qui sont les mêmes dans le cas d'un accent circonflexe) au sein d'un <textarea> ou texte <input>.

    Noter que le textarea doit avoir le focus pour que cette fonction fonctionne correctement sous IE. En cas de doute, appelez le textarea du focus() d'abord la méthode.

    function getInputSelection(el) {
var start = 0, end = 0, normalizedValue, range,
textInputRange, len, endRange;
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
start = el.selectionStart;
end = el.selectionEnd;
} else {
range = document.selection.createRange();
if (range && range.parentElement() == el) {
len = el.value.length;
normalizedValue = el.value.replace(/\r\n/g, "\n");
//Create a working TextRange that lives only in the input
textInputRange = el.createTextRange();
textInputRange.moveToBookmark(range.getBookmark());
//Check if the start and end of the selection are at the very end
//of the input, since moveStart/moveEnd doesn't return what we want
//in those cases
endRange = el.createTextRange();
endRange.collapse(false);
if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
start = end = len;
} else {
start = -textInputRange.moveStart("character", -len);
start += normalizedValue.slice(0, start).split("\n").length - 1;
if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
end = len;
} else {
end = -textInputRange.moveEnd("character", -len);
end += normalizedValue.slice(0, end).split("\n").length - 1;
}
}
}
}
return {
start: start,
end: end
};
}
    • Excusez-moi mais qu'est-ce quegamme && gamme.parentElement() " signifie pour vous?
    • Il y a un problème si nous voulons obtenir la position du curseur dans IE (si la sélection est vide). Dans ce cas, elle renvoie 0 que le début et la longueur de la chaîne de la fin (si on utilise true au lieu de gamme && gamme.parentElement() == el).
    • Le range && range.parentElement() == el est là pour tester si la sélection se trouve dans le textarea et est nécessaire. Il n'y a pas de problème avec la fonction de l'obtention de la position du curseur tant que la zone de texte a le focus. En cas de doute, appelez le textarea du focus() méthode avant d'appeler getInputSelection(). Je vais ajouter une note à la réponse.
    • Il ne fonctionne pas correctement dans IE9: jsfiddle.net/AMy4Y/2
    • Je n'ai pas accès à IE 9 droit maintenant. Quel est le problème?
    • Lorsque vous cliquez sur un élément div pour révéler la sélection de "début" et "fin" sont toujours les mêmes.
    • Ce n'est pas la faute de la fonction: c'est ce qui est réellement sélectionnés par le temps, la fonction s'exécute. Vous pouvez voir visuellement après la destitution de la boîte d'alerte. Comme je l'ai mentionné dans ma réponse à votre dernière question, deux solutions possibles sont à l'aide de la mousedown de l'événement ou de l'ajout d' unselectable="on" à la <div> élément.
    • Merci beaucoup! Le unselectable="on" option a mieux fonctionné dans mon cas. Vous m'a vraiment aidé beaucoup! Continuer à fournir un soutien incroyable pour vos réponses!
    • J'obtiens une erreur "Uncaught TypeError: Ne peut pas appeler la méthode 'createRange' undefined" dans Google Chrome... Est cette fonction uniquement pour IE?
    • Non, il fonctionne dans tous les principaux navigateurs. Si vous obtenez cette erreur, alors vous devez être en train de passer autre chose qu'un textarea ou de la zone de saisie de texte dans la fonction.
    • Je suis seulement de passage d'un textarea ou de saisie de texte, rien d'autre... Ça doit être quelque chose d'autre causeing le problème. Je vais signaler quand je le trouve... hmmmmm.... (Je suis en train de l'utiliser pour mon plugin Chrome: chrome.google.com/webstore/detail/...)
    • Ne fonctionne pas correctement dans l'Opéra 🙁
    • De quelle manière?
    • Semble bien pour moi: jsfiddle.net/3NUP2
    • avec bouton externe de l'événement, le scénario comme ceci jsfiddle.net/kayz1/BwRC6/3 (mais ce violon n'est pas de travail à l'Opéra, je ne sais pas pourquoi)
    • Je ne sais pas pourquoi ça ne fonctionne pas à l'Opéra, mais ce n'est pas un problème avec cette fonction. Rien n'a fonctionné que dans jsFiddle jusqu'à ce que j'ai enlevé jQuery.

    InformationsquelleAutor Tim Down
  3. 3

    J'ai modifié la fonction ci-dessus pour tenir compte des retours chariot dans IE. Il est non testé, mais j'ai fait quelque chose de similaire avec elle dans mon code, donc ça devrait être réalisable.

    function getCaret(el) {
if (el.selectionStart) { 
return el.selectionStart; 
} else if (document.selection) { 
el.focus(); 
var r = document.selection.createRange(); 
if (r == null) { 
return 0; 
} 
var re = el.createTextRange(), 
rc = re.duplicate(); 
re.moveToBookmark(r.getBookmark()); 
rc.setEndPoint('EndToStart', re); 
var add_newlines = 0;
for (var i=0; i<rc.text.length; i++) {
if (rc.text.substr(i, 2) == '\r\n') {
add_newlines += 2;
i++;
}
}
//return rc.text.length + add_newlines;
//We need to substract the no. of lines
return rc.text.length - add_newlines; 
}  
return 0; 
}
    InformationsquelleAutor mark
  4. 2

    Si vous n'avez pas à soutenir IE, vous pouvez utiliser selectionStart et selectionEnd attributs de textarea.

    Pour obtenir la position du curseur utilisez simplement selectionStart:

    function getCaretPosition(textarea) {
return textarea.selectionStart
}

    Pour obtenir les cordes autour de la sélection, utilisez le code suivant:

    function getSurroundingSelection(textarea) {
return [textarea.value.substring(0, textarea.selectionStart)
,textarea.value.substring(textarea.selectionStart, textarea.selectionEnd)
,textarea.value.substring(textarea.selectionEnd, textarea.value.length)]
}

    Démo sur JSFiddle.

    Voir aussi HTMLTextAreaElement docs.

    InformationsquelleAutor Michał Perłakowski