Wie erhalte ich die (x, y)-Pixelkoordinaten des Cursors in Textfeldern?

Question

Ich verwende jQuery und versuche, einen browserübergreifenden Weg zu finden, um die Pixelkoordinaten des Carets abzurufen <textarea>s und input Kästchen, so dass ich ein absolut positioniertes Div um diesen Ort platzieren kann.

Gibt es ein jQuery-Plugin?Oder ein JavaScript-Snippet, um genau das zu tun?

Answer 1

Ich habe nach einem Textarea-Caret-Koordinaten-Plugin für gesucht Meteor-Autovervollständigung, also habe ich alle 8 Plugins auf GitHub evaluiert.Der Gewinner ist mit Abstand textarea-caret-position aus Komponente.

Merkmale

• Pixelpräzision
• keinerlei Abhängigkeiten
• Browser-Kompatibilität:Chrome, Safari, Firefox (trotz zwei Käfer es hat), IE9+;Funktioniert möglicherweise, wurde jedoch nicht in Opera, IE8 oder älter getestet
• unterstützt jede Schriftfamilie und -größe sowie Texttransformationen
• Der Textbereich kann beliebige Abstände oder Ränder haben
• nicht durch horizontale oder vertikale Bildlaufleisten im Textbereich verwechselt
• unterstützt harte Zeilenumbrüche, Tabulatoren (außer im IE) und aufeinanderfolgende Leerzeichen im Text
• Korrekte Position bei Zeilen, die länger als die Spalten im Textbereich sind
• NEIN „Geister“-Position im leeren Raum am Ende einer Zeile beim Umbrechen langer Wörter

Hier ist eine Demo - http://jsfiddle.net/dandv/aFPA7/

Wie es funktioniert

Ein Spiegel <div> wird außerhalb des Bildschirms erstellt und genau so gestaltet <textarea>.Dann wird der Text des Textbereichs bis zum Caret in das div und a kopiert <span> wird direkt danach eingefügt.Anschließend wird der Textinhalt des Spans auf den Rest des Textes im Textbereich gesetzt, um den Umbruch im Faux-Div originalgetreu zu reproduzieren.

Dies ist die einzige Methode, die garantiert alle Randfälle im Zusammenhang mit dem Umbrechen langer Zeilen behandelt.Es wird auch von GitHub verwendet, um die Position zu bestimmen @ Benutzer-Dropdown.

Answer 2

Notiz:Diese Antwort beschreibt, wie man das bekommt Zeichenkoordinaten des Textcursors/Caret.Um die Pixelkoordinaten zu finden, müssen Sie dies weiter erweitern.

Als Erstes ist zu beachten, dass sich der Cursor in drei Zuständen befinden kann

• ein normaler Einfügecursor an einer bestimmten Position
• eine Textauswahl, die einen bestimmten begrenzten Bereich hat
• nicht aktiv:Der Textbereich hat keinen Fokus.Wurde nicht verwendet.

Das IE-Modell verwendet das Objekt Dokumentauswahl, daraus können wir eine bekommen TextRange Objekt, das uns Zugriff auf die Auswahl und damit auf die Cursorposition(en) gibt.

Das FF-Modell/Opera verwendet die praktischen Variablen [input].selectionStart und SelectionEnd.

Beide Modelle stellen einen regulären aktiven Cursor als Auswahl mit der Breite Null dar, wobei die linke Grenze die Cursorposition ist.

Wenn das Eingabefeld nicht den Fokus hat, stellen Sie möglicherweise fest, dass keiner von beiden festgelegt ist.Mit dem folgenden Code hatte ich guten Erfolg, einen Text an der aktuellen Cursorposition einzufügen und dabei auch die aktuelle Auswahl zu ersetzen, falls vorhanden.Abhängig vom genauen Browser, 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;
}

Fehlerhinweis:Links werden im oberen Absatz nicht korrekt markiert.

Auswahlobjekt: http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx
TextRange-Objekt: http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

Answer 3

Ich glaube nicht, dass dies in jedem Browser möglich ist.Jemand hat es im IE6 gemacht, aber es funktioniert nicht in FF oder Opera (AFAIK).Vielleicht können Sie es in allen Browsern zum Laufen bringen.

Hier ist ein Blogbeitrag aus dem Jahr 2005.