Trova la posizione del punto di inserimento nell'area di testo in pixel

Mi chiedevo se è possibile trovare la posizione esatta del carret all'interno di un'area di testo in pixel in relazione all'intera pagina. Ad esempio, se ho digitato This is text nella mia casella di testo, mi piacerebbe conoscere i pixel in alto a sinistra dello schermo per il carot.Trova la posizione del punto di inserimento nell'area di testo in pixel

Sarebbe nel formato X: 200 Y: 100. Questo è così che posso posizionare un div floating. Questo deve essere fatto dinamicamente in javascript.

Grazie ragazzi

fonte

2012-01-26 JustinPGriffen

Circa pixies '42'. – alex

Grazie per questo chiarificatore amico: P – alex

Potresti essere interessato a [qualsiasi numero di queste domande] (http://stackoverflow.com/search?q=caret+javascript+position+x+y). –

Questo "codice raw" lavora almeno in IE.

Utilizzando il codice è possibile inserire il numero <TEXTAREA> in qualsiasi punto della pagina e lo <DIV id="db"> lo seguirà. Anche a dispetto della posizione di scorrimento della pagina. È possibile correggere la posizione di <DIV> modificando i numeri letterali allo 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>

Posizionamento del <DIV> non è del tutto esatto, ma c'è di meglio quando si utilizzano caratteri a larghezza fissa in <TEXTAREA>.

fonte

2012-01-26 07:44:05 Teemu

Ecco un plug-in per questo: jQuery caret plugin

fonte

2012-01-26 02:34:26

Questo plugin funziona con la posizione del punto di inserimento rispetto ai caratteri all'interno del campo di input; l'OP sta cercando la posizione dello schermo (cioè x, y) del cursore. –

Non sei un po 'pesante con il voto negativo? Spiega per favore! –

Beh, il downvote era per un paio di motivi, ma per favore non portarlo personalmente - Sono pronto a rescindere il downvote se la risposta viene positivamente aggiornata. Le ragioni del downvote erano A) è una risposta solo per collegamento, [che sono scoraggiate] (http://meta.stackexchange.com/questions/8231), e B) mentre il plugin può aiutare con lo sforzo dell'OP, è Lo scopo è quello di impostare e trovare il punto di accesso tra caratteri specifici all'interno di un input, che in questo caso non è ciò che l'OP sta cercando. –

è Un'implementazione: https://github.com/beviz/jquery-caret-position-getter, può ottiene posizione del cursore in textarea (IEX, y)

fonte

2012-02-20 14:46:33

Ho cambiato il link a Github. –

Qualche possibilità di non dipendere da jQuery? Abbiamo avuto [problemi nell'usare il tuo plugin con jQuery 1.9. *, Che elimina '$ .browser'] (https://github.com/beviz/jquery-caret-position-getter/issues/5). –

Ecco un semplice mix di idee da Caret position in pixels in an input type text (not a textarea), Caret position in textarea, in characters from the start e document.getElementById vs jQuery $() per ottenere la posizione del cursore in jQuery per un elemento <input>. Funziona quando si fa clic all'interno di esso, ma non quando si muove il cursore usando le frecce o digitando.

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

Invece di var inputter = document.getElementById('someid') usiamo var inputter = $('#someid')[0];

Ecco un FIDDLE.

fonte

2013-02-14 13:33:41

Trova la posizione del punto di inserimento nell'area di testo in pixel

risposta

Problemi correlati