Obtenir la position de décalage du curseur dans une zone de texte en pixels [dupliquer]

Vous pouvez créer un élément séparé (invisible) et le remplir avec du contenu textarea du début à la position du curseur. Textarea et le" clone " doivent avoir des CSS correspondants (propriétés de police, padding / margin / border et width). Ensuite, empilez ces éléments les uns sur les autres.

Permettez-moi de commencer par un exemple de travail, puis parcourez le code: http://jsfiddle.net/g7rBk/

Violon mis à jour (avec IE8 fix)

HTML:

<textarea id="input"></textarea>
<div id="output"><span></span></div>
<div id="xy"></div>

Textarea est auto-explicatif. La sortie est un élément caché auquel nous allons passer le contenu du texte et faire des mesures. Ce qui est important, c'est que nous utilisions un élément en ligne. le div" xy " est juste un indicateur à des fins de test.

CSS:

/* identical styling to match the dimensions and position of textarea and its "clone"
*/
#input, #output {
    position:absolute;
    top:0;
    left:0;
    font:14px/1 monospace;
    padding:5px;
    border:1px solid #999;
    white-space:pre;
    margin:0;
    background:transparent;
    width:300px;
    max-width:300px;
}
/* make sure the textarea isn't obscured by clone */
#input { 
    z-index:2;
    min-height:200px;
}

#output { 
    border-color:transparent; 
}

/* hide the span visually using opacity (not display:none), so it's still measurable; make it break long words inside like textarea does. */
#output span {
    opacity:0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* the cursor position indicator */
#xy { 
    position:absolute; 
    width:4px;
    height:4px;
    background:#f00;
}

JavaScript:

/* get references to DOM nodes we'll use */
var input = document.getElementById('input'),
    output = document.getElementById('output').firstChild,
    position = document.getElementById('position'),

/* And finally, here it goes: */
    update = function(){
         /* Fill the clone with textarea content from start to the position of the caret. You may need to expand here to support older IE [1]. The replace /\n$/ is necessary to get position when cursor is at the beginning of empty new line.
          */
         output.innerHTML = input.value.substr( 0, input.selectionStart ).replace(/\n$/,"\n\001");

        /* the fun part! 
           We use an inline element, so getClientRects[2] will return a collection of rectangles wrapping each line of text.
           We only need the position of the last rectangle.
         */
        var rects = output.getClientRects(),
            lastRect = rects[ rects.length - 1 ],
            top = lastRect.top - input.scrollTop,
            left = lastRect.left+lastRect.width;
        /* position the little div and see if it matches caret position :) */
        xy.style.cssText = "top: "+top+"px;left: "+left+"px";
    }

[1] position du curseur dans textarea, en caractères depuis le début

[2] https://developer.mozilla.org/en/docs/DOM/element.getClientRects

Edit: cet exemple ne fonctionne que pour une largeur fixe textarea. Pour le faire fonctionner avec textarea redimensionnable par l'utilisateur, vous devez ajouter un écouteur d'événement à l'événement redimensionner et définir les dimensions # output pour correspondre aux nouvelles dimensions # input .

Il existe une solution beaucoup plus simple pour obtenir la position du curseur en pixels, que ce qui a été présenté dans les autres réponses.

Notez que cette question est un doublon de 2008, et j'ai répondu ici. Je maintiendrai seulement la réponse à ce lien, puisque cette question aurait dû être fermée en double il y a des années.

Copie de la réponse

J'ai cherché un plugin textarea caret coordinates pour meteor-autocomplete , donc j'ai évalué tous les 8 plugins sur GitHub. Le gagnant est, de loin, textarea-caret-position à partir de Composant.

Caractéristiques

• précision des pixels
• aucune dépendance
• compatibilité du navigateur: Chrome, Safari, Firefox (malgré deux bugs {[8] } Il a), IE9+; peut fonctionner mais pas testé dans Opera, IE8 ou plus
• prend en charge toute famille de polices et la taille, ainsi que le texte-transforme
• la zone de texte peut avoir rembourrage ou bordures
• pas confondu par des barres de défilement horizontales ou verticales dans la zone de texte
• prend en charge les retours durs, les tabulations (sauf sur IE) et les espaces consécutifs dans le texte
• position correcte sur les lignes plus longues que les colonnes de la zone de texte
• non "fantôme" de la position dans l'espace vide à la fin d'une ligne lors de l'emballage des mots longs

Voici une démo - http://jsfiddle.net/dandv/aFPA7/

Comment ça travaux

Un miroir {[0] } est créé hors écran et stylisé exactement comme le <textarea>. Ensuite, le texte de la zone de texte jusqu'au curseur est copié dans le div et un <span> est inséré juste après. Ensuite, le contenu du texte de la durée est définie à la suite du texte dans le textarea, afin de reproduire fidèlement l'emballage dans le faux-div.

C'est la seule méthode garantie pour gérer tous les cas de bord relatifs à l'encapsulation de longues lignes. Il est également utilisé par GitHub pour déterminer la position de son @ liste déroulante utilisateur.

Jsfiddle de l'exemple de travail: http://jsfiddle.net/42zHC/2/

Fondamentalement, nous déterminons combien de colonnes correspondent à la largeur (car ce sera monospace). Nous devons forcer les barres de défilement à toujours être là sinon le calcul est désactivé. Ensuite, nous divisons le nombre de colonnes qui correspondent à la largeur, et nous obtenons le décalage en x par caractère. Ensuite, nous définissons la hauteur de la ligne sur le textarea. Puisque nous savons combien de caractères sont dans une rangée, nous pouvons diviser cela avec le nombre de caractères et nous obtenons le numéro de ligne. Avec la hauteur de ligne, nous avons maintenant le décalage Y. Ensuite, nous obtenons le scrollTop de la zone de texte et soustrayons cela, de sorte qu'une fois qu'il commence à utiliser la barre de défilement, il apparaît toujours dans la bonne position.

Javascript:

$(document).ready(function () {
  var cols = document.getElementById('t').cols;
  var width = document.getElementById('t').clientWidth;
  var height = $('textarea').css('line-height');
  var pos = $('textarea').position();
  $('#t').on('keyup', function () {
    el = document.getElementById("t");
    if (el.selectionStart) { 
        selection = el.selectionStart; 
      } else if (document.selection) { 
        el.focus(); 
        var r = document.selection.createRange(); 
        if (r == null) { 
           selection = 0; 
        } 
        var re = el.createTextRange(), 
        rc = re.duplicate(); 
        re.moveToBookmark(r.getBookmark()); 
        rc.setEndPoint('EndToStart', re); 
        selection = rc.text.length; 
      } else { selection = 0 }
    var row = Math.floor((selection-1) / cols);
    var col = (selection - (row * cols));
    var x = Math.floor((col*(width/cols)));
    var y = (parseInt(height)*row);
    $('span').html("row: " + row + "<br>columns" + col + "<br>width: " + width + "<br>x: " + x +"px<br>y: " + y +"px<br>Scrolltop: "+$(this).scrollTop()).css('top',pos.top+y-$(this).scrollTop()).css('left',pos.left+x+10);
  });
});

HTML:

<textarea id="t"></textarea>
<br>
<span id="tooltip" style="background:yellow"></span>

CSS:

textarea {
  height: 80px;
  line-height: 12px;
  overflow-y:scroll;
}
span {
  position: absolute;
}

Je n'ai pas pu obtenir quelque chose de similaire au travail, donc ma solution était de localiser la position du caractère du curseur dans la zone de texte, de découper le paragraphe actuel et de l'afficher à côté de la zone de texte.

En utilisant le décalage, j'ai placé un faux curseur (div, display:inline, 1px large, border-left: 1px solid black) dans cette vue du texte modifiable.

De cette façon, vous pouvez créer une zone de rétroaction visuelle où vous pouvez afficher le résultat des effets (tout comme le fait stackoverflow lorsque vous écrivez une réponse).