pobierz wiersz i kolumnę z kursorem w edytorze treści div

Istnieje kilka receptur na znalezienie pozycji kursora, gdy użytkownik wpisuje tekst w edytowalnej zawartości div, ale nie mogę uzyskać żadnego z nich do pracy. W rzeczywistości najbardziej zaskakujące są wyniki najprostszego kodu; jeśli w poniższym fragmencie dodasz trochę tekstu, a potem backspace, aby go usunąć, Twój startoffset rzeczywiście się zwiększy! (Mogę sobie wyobrazić jego dzielenie elementów lub coś takiego, a offset zawiera znaczniki niedrukowalne lub coś takiego.)pobierz wiersz i kolumnę z kursorem w edytorze treści div

Mam element div, który będzie miał ustaloną czcionkę, ale które mam zamiar dodać podświetlanie składni (nie jest to coś, co może wywołać codemirror po prostu zrobić; jej bardziej interaktywny wiersz z edycji w dowolnym miejscu skryptu, jeśli tego rodzaju sens dlaczego ja chce uzyskać pozycję myself)

<html> 
<head> 
<script type="text/javascript"> 
<!-- 
var ta = null; 

function onKeypress(event) { 
    var range = window.getSelection().getRangeAt(0); 
    document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
} 

function init() { 
    ta = document.getElementById("ta"); 
    ta.focus(); 
    ta.onkeypress = onKeypress; 
} 
//--> 
</script> 
<body onload="init();"> 
<noscript> 
Sorry, you need javascript. Not much to see here otherwise; move along. 
</noscript> 
<p id="msg"></p><hr/> 
<div id="ta" contenteditable="true" style="width:100%; height:100%; font-family: courier;"> 
</div> 
</body> 
</html>

Skąd mogę wiedzieć, wiersza i kolumny, i uzyskać tekst. dla dowolnego wiersza w takim edytowalnym div zawartości?

Źródło

2012-03-31 Will

Nie jestem pewien, co mówisz jest złego kodu. Kiedy testuję przykładowy kod w Chrome, kod wydaje się działać - kiedy cofam się, wyświetlanie pozycji nie aktualizuje się, dopóki nie zacznę wpisywać więcej tekstu do elementu div, ale wtedy wyświetlenie pozycji jest poprawne. Czy problem z backspace nie uruchamia zdarzenie keyup, czy coś innego, czego mi brakuje? – Griffin

Ah, myślę, że rozumiem, wysłałem odpowiedź. – Griffin

-1

Czy rozważałeś użycie pól tekstowych zamiast elementów div?

<textbox>edit my content</textbox>

Jeśli trzeba użyć div można dostać i aktualizację jej treści z właściwością innerHTML

alert(document.getElementById('theIdOfMyDiv').innerHTML);

lub dodać zawartość

var currentContent = document.getElementById('theIdOfMyDiv').innerHTML; 
currentContent = currentContent + 'add some content';

Źródło

2012-04-01 10:42:53 codelove

Czy przeczytałeś nawet to pytanie? – Griffin

+1 dla zrozumienia pytania – codelove

Po zmianie onkeypress do onKeyDown (aby przechwycić backspace) Widzę, że wyświetlanie pozycji zwiększa się jeden raz, gdy wprowadzono backspace.

Wybacz mi, jeśli mam zły koniec kija, ale wierzę, że jedno rozwiązanie jest w następujący sposób:

var ta = null; 
var range = null; 

function onKeyDown(event) { 
    if(event.which != 8 && event.which != 46) { 
     range = window.getSelection().getRangeAt(0); 
     document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
    } 
} 

function onKeyUp(event) { 
    range = window.getSelection().getRangeAt(0); 
    document.getElementById("msg").textContent = ""+range.startContainer+","+range.startOffset; 
} 

function init() { 
    ta = document.getElementById("ta"); 
    ta.focus(); 
    ta.onkeydown = onKeyDown; 
    ta.onkeyup = onKeyUp; 
}

Źródło

2012-04-01 15:29:26 Griffin

co się stanie, jeśli naciśniesz klawisz Enter? – Will

Zaczyna ponownie odliczać od zera. nie ma nic w twoim kodzie, aby wyświetlić wiersz, w którym znajduje się kursor. – Griffin

, ale to jest większe pytanie! "Skąd mogę znać wiersz i kolumnę oraz uzyskać tekst dla dowolnego wiersza w takim edytowalnym pliku div?". Ponieważ jest to jak edytor tekstu sformatowanego, za każdym razem, gdy użytkownik naciśnie klawisz, chcę wiedzieć, w którym wierszu się znajdują i jaka jest zawartość linii. – Will

pobierz wiersz i kolumnę z kursorem w edytorze treści div

Odpowiedz

Powiązane problemy