Jak znaleźć położenie kursora (X/Y, nie linia/kolumna) w obszarze tekstowym HTML?

Chciałbym wyświetlić listę rozwijaną w <textarea>, aby pomóc użytkownikowi w pisaniu niektórych rzeczy. Wiesz o tym od obecnych IDE jako uzupełnienie kodu. Gdy zaczniesz coś pisać, pojawi się wyskakujące okno z bieżącą pozycją kursora/znacznika i będziesz mógł poruszać się po nim za pomocą klawiszy strzałek, aby dokończyć wprowadzanie tekstu.Jak znaleźć położenie kursora (X/Y, nie linia/kolumna) w obszarze tekstowym HTML?

wiem how to get the cursor position w ciągu tekstowego (czyli indeksu znaku na pozycji kursora), ale nie wiem jak zdobyć współrzędnych X/Y (coś jak offsetWidth i offsetHeight) kursora wewnątrz elementu <textarea> tak, że Umiem tam umieścić element listy. Czy to możliwe w HTML/JavaScript i jak by to działało?

Źródło

2011-08-05 ygoe

+ 1 To całkiem dobre pytanie! – Ben

Jeśli znasz liczbę znaków i szerokość pola, możesz odgadnąć pozycję w oparciu o średnią szerokość/wysokość linii? –

Czytałem inne proponowane pytanie, ale nie uważam jego odpowiedzi za rozwiązanie tego problemu. Ponadto ma 3 lata, a w międzyczasie zaawansowane są przeglądarki i standardy. Nie boję się wymagać aktualnej przeglądarki, aby to działało. – ygoe

Przy wejściu do edycji html (w iframe jak CKeditor lub Rich Text Editor lub nawet lepiej: jsfiddle) można wstawić pusty element span na pozycji karetki i uzyskać pozycję tego elementu, aby wyświetlić swój rozwijanej.

To może wydawać się skomplikowane, ale nie mogę wymyślić innego sposobu na zrobienie tego.

Posiada kilka dodatkowych możliwości, kiedy używany przez edytor kodu, można kod koloru tekstu i format kodu jak jsfiddle robi, a może nawet zbudować jakąś code-autouzupełniania słów kluczowych itp

Źródło

2011-08-05 12:45:09 Willem

Dodatkowe możliwości brzmią dobrze, podobnie jak twoja ciekawa sugestia. Ale chciałbym się upewnić, że użytkownik nie może wprowadzić sformatowanego tekstu (np. Podczas kopiowania z MS Word lub innych stron internetowych), a cały wklejony tekst jest ponownie formatowany, aby wyglądać jak zwykły tekst i można go przekonwertować na taki. – ygoe

To możliwe, jsfiddle.net właśnie to robi. Jak dokładnie to robią, nie wiem. Spróbuj kodowania i wklejania na tej stronie na chwilę, może dać ci kilka pomysłów. (W FF ctrl + v nie działa, ale "prawy klik - wklej" robi) – Willem

CKeditor można pobrać i używać jako open-source, ale jsfiddle wydaje się być tylko aplikacją internetową, bez pobierania, bez technicznych wglądów. Czy wiesz, jak oni zrobili swoje rzeczy? – ygoe

Jak znaleźć położenie kursora (X/Y, nie linia/kolumna) w obszarze tekstowym HTML?

Odpowiedz

Powiązane problemy