Trouver la position du caret dans la zone de texte en pixels

Je me demandais s'il était possible de trouver l'emplacement exact du carret à l'intérieur d'une zone de texte en pixels par rapport à la page entière. Par exemple, si j'ai tapé This is text dans ma boîte de texte, je voudrais connaître les pixes en haut à gauche de l'écran à la carotte.Trouver la position du caret dans la zone de texte en pixels

Ce serait sous la forme X: 200 Y: 100. C'est ainsi que je peux positionner un div flottant. Cela doit être fait dynamiquement dans javascript.

Merci les gars

Source

2012-01-26 JustinPGriffen

Pixies environ '42'. – alex

Merci pour ce buddy de clarification: P – alex

Vous pouvez être intéressé par [un certain nombre de ces questions] (http://stackoverflow.com/search?q=caret+javascript+position+x+y). –

Ce "code brut" fonctionne au moins dans IE.

En utilisant le code, vous pouvez mettre votre <TEXTAREA> où vous voulez dans la page, et le <DIV id="db"> le suivra. Même en dépit de la position de défilement de la page. Vous pouvez corriger la position de <DIV> en modifiant les nombres littéraux au d.style...6 -statements.

<body> 
<div id="db" style="position:absolute;left:-20px;top:-20px;border:1px solid red;">V</div> 
<br><br><br> 
<form id="props"> 
<textarea id="ta" style="width:200px;height:100px;" onkeyup="moveDiv();"></textarea> 
</form> 

<script> 
<!-- 
var b=document.body; 
var d=document.getElementById('db'); 
var a=document.getElementById('ta'); 

function moveDiv(){ 
    var sel=document.selection; 
    var targ=sel.createRange(); 
    d.style.top=a.offsetTop+a.clientTop-d.clientHeight-6; 
    d.style.left=targ.offsetLeft+b.scrollLeft-6; 
    return; 
} 
// --> 
</script> 
</body>

Positionnement du <DIV> est pas tout à fait exact, mais obtient mieux lorsque vous utilisez la police de largeur fixe dans <TEXTAREA>.

Source

2012-01-26 07:44:05 Teemu

Voici un plug-in pour cela: jQuery caret plugin

Source

2012-01-26 02:34:26

Ce plugin fonctionne avec la position du curseur par rapport aux caractères dans le champ de saisie; l'OP recherche la position de l'écran (c'est-à-dire x, y) du curseur. –

N'êtes-vous pas un peu lourd avec le vote à la baisse? S'il vous plaît, expliquez! –

Eh bien, le downvote était pour une couple de raisons, mais s'il vous plaît ne le prenez pas personnellement - je suis rapide pour annuler la downvote si la réponse est positivement mise à jour. Les raisons de la downvote étaient A) c'est une réponse de lien seulement, [qui sont découragés] (http://meta.stackexchange.com/questions/8231), et B) tandis que le plugin peut aider avec l'effort du PO, c'est L'objectif est à la fois de définir et de trouver le signe entre des caractères spécifiques dans une entrée, ce qui n'est pas ce que l'OP est après dans ce cas. –

Il y a un implemention: https://github.com/beviz/jquery-caret-position-getter, il peut se position caret dans textarea (IEX, y)

Source

2012-02-20 14:46:33

J'ai changé le lien vers Github. –

Une chance de ne pas dépendre de jQuery? Nous avons eu [des problèmes en utilisant votre plugin avec jQuery 1.9. *, Qui se débarrasse de '$ .browser'] (https://github.com/beviz/jquery-caret-position-getter/issues/5). –

est ici un simple mélange d'idées de Caret position in pixels in an input type text (not a textarea), Caret position in textarea, in characters from the start et document.getElementById vs jQuery $() pour obtenir la position de caret dans jQuery pour un élément <input>. Il fonctionne en cliquant à l'intérieur, mais pas en déplaçant le curseur à l'aide des flèches ou en tapant.

<input id="someid"> 
<span id="faux" style="display:none"></span><br/> 

<script> 
var inputter = $('#someid')[0]; 
var faux = $('#faux'); 

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

$("#someid").click(function(event) { 
    caretpos = getCaret(inputter); 
    calcfaux = faux.text($(this).val().substring(0, caretpos)); 
    fauxpos = calcfaux.outerWidth(); 
    $("#getpx").text(fauxpos + " px"); 
}); 

</script>

Au lieu de var inputter = document.getElementById('someid') nous utilisons var inputter = $('#someid')[0];

Voici un FIDDLE.

Source

2013-02-14 13:33:41

Trouver la position du caret dans la zone de texte en pixels

Répondre

Questions connexes