Come posso ottenere le coordinate in pixel (x, y) del cursore nelle caselle di testo?

Question

Sto usando jQuery e sto cercando di trovare un modo cross browser per ottenere le coordinate in pixel del cursore <textarea>sabbia input box in modo tale da poter posizionare un div posizionato in modo assoluto attorno a questa posizione.

Esiste qualche plugin jQuery?O uno snippet JavaScript per fare proprio questo?

Answer 1

Ho cercato un plugin per le coordinate dell'area di testo per completamento automatico meteora, quindi ho valutato tutti gli 8 plugin su GitHub.Il vincitore è, di gran lunga, posizione-accento-testo da Componente.

Caratteristiche

• precisione dei pixel
• nessuna dipendenza di sorta
• compatibilità del browser:Chrome, Safari, Firefox (nonostante due bug ha), IE9+;potrebbe funzionare ma non è stato testato in Opera, IE8 o versioni precedenti
• supporta qualsiasi famiglia e dimensione di carattere, nonché trasformazioni di testo
• l'area di testo può avere spaziatura o bordi arbitrari
• non confuso dalle barre di scorrimento orizzontali o verticali nell'area di testo
• supporta ritorni a capo, tabulazioni (tranne su IE) e spazi consecutivi nel testo
• posizione corretta sulle righe più lunghe delle colonne nell'area di testo
• NO posizione "fantasma" nello spazio vuoto alla fine di una riga quando si vanno a capo parole lunghe

Ecco una demo - http://jsfiddle.net/dandv/aFPA7/

Come funziona

Uno specchio <div> viene creato fuori schermo e ha lo stile esattamente come il <textarea>.Quindi, il testo della textarea fino al cursore viene copiato nei div e a <span> viene inserito subito dopo.Quindi, il contenuto testuale dello span viene impostato sul resto del testo nella textarea, in modo da riprodurre fedelmente l'avvolgimento nel finto div.

Questo è l'unico metodo garantito per gestire tutti i casi limite relativi al confezionamento di lunghe linee.Viene utilizzato anche da GitHub per determinare la posizione dei suoi file @ menu a discesa dell'utente.

Answer 2

Nota:questa risposta descrive come ottenere il file coordinate del personaggio del cursore/accento circonflesso.Per trovare le coordinate dei pixel, dovrai estenderle ulteriormente.

La prima cosa da ricordare è che il cursore può trovarsi in tre stati

• un cursore di inserimento regolare in una posizione specifica
• una selezione di testo che ha una certa area delimitata
• non attivo:textarea non ha focus.Non è stato utilizzato.

Il modello IE utilizza l'oggetto selezione.documento, da questo possiamo ottenere a TextRange oggetto che ci dà accesso alla selezione e quindi alla/e posizione/i del cursore.

Il modello FF/Opera utilizza le comode variabili [input].selectionStart e SelectionEnd.

Entrambi i modelli rappresentano un cursore attivo regolare come selezione di larghezza zero, con il limite sinistro che rappresenta la posizione del cursore.

Se il campo di input non è attivo, potresti scoprire che nessuno dei due è impostato.Ho avuto un buon successo con il seguente codice per inserire una porzione di testo nella posizione corrente del cursore, sostituendo anche la selezione corrente, se presente.A seconda del browser esatto, YMMV.

function insertAtCursor(myField, myValue) {

/* selecion model - ie */
if (document.selection) {
  myField.focus();
  sel = document.selection.createRange();
  sel.text = myValue;
}

/* field.selectionstart/end  firefox */ 
else if (myField.selectionStart || myField.selectionStart == '0' ) {

  var startPos = myField.selectionStart;
  var endPos = myField.selectionEnd;
  myField.value = myField.value.substring(0, startPos)
    + myValue
    + myField.value.substring(endPos, myField.value.length);

  myField.selectionStart = startPos + myValue.length;
  myField.selectionEnd = startPos + myValue.length;
  myField.focus();
} 

// cursor not active/present
else {
  myField.value += myValue;
}

Nota sull'errore:i collegamenti non vengono contrassegnati correttamente nel paragrafo superiore.

Oggetto di selezione: http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx
Oggetto TextRange: http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

Answer 3

Non penso che sia possibile farlo con tutti i browser.Qualcuno lo ha fatto in IE6, ma non funziona in FF o Opera (AFAIK).Forse puoi farlo funzionare in tutti i browser.

Ecco un post sul blog del 2005.