[js] Dynamiczne drukowanie zawartości textarea w div, jak to ugryźć Opcje

[rozny]

Witam,

zastanawiam się w jaki sposób rozwiązać zagadnienie. Chcę w czasie rzeczywistym drukować zawartość textarea w divie - coś na zasadzie podglądu wprowadzonych zmian w czasie rzeczywistym. Za js zabrałem się tak na prawdę dopiero kilka dni temu, dlatego zmuszony jestem poradzić się kogoś bardziej doświadczonego.

W jaki sposób za pomocą js mogę ingerować w zawartość elementu div? W jaki sposób w czasie rzeczywistym pobierać zawartość textarea? Na razie kombinuję z parametrem onChange wywołującym funkcję czytającą zawartość textarea, niestety nie jest to dobre rozwiązanie, gdyż zmiana następuje dopiero po dezaktywacji pola textarea.

Zależy mi bardziej na wskazówkach jak ugryźć temat niż na gotowcu. Będę wdzięczny za pomoc.

Pozdrawiam

[kamil4u]

Skoro chcesz wskazówki to proszę bardzo Poczytaj o DOM i wszystkim co z nim związane. Generalnie to by Ci wystarczyło, ale ,że jest tego naprawdę sporo to napiszę Ci trochę więcej. Po pierwsze DOM musi być załadowany, najprościej użyć tutaj zdarzenia onload. Następnie trzeba się dobrać do div-a. Tu właśnie z pomocą przychodzi nam DOM i metoda szukania po id( bo po tym atrybucie najprościej ). Osiągniemy to za pomocą document.getElementById . Skoro mamy element teraz chcemy zmienić jego zawartość. Tu potrzebujesz .innerHTML . Dzięki temu możesz zmieniać wartość div-a. Teraz bawimy się dalej, czyli pobieramy referencję do elementu textarea( też najłatwiej po id ). Jego zawartość pobieramy za pomocą .value . Brakuje Ci teraz znaku '=' i kolejnego zdarzenia onchange. Przypisujemy zatem zdarzenie elementowi textarea. Robisz to za pomocą JS, a nie atrybutu HTML. Warto też żebyś zapoznał się ze słówkiem this, które wiele ułatwia.

Pseudokod:

Kod

Gdy_pobrany_DOM -> {
pobierz_element_textarea.przypisz_zdarzenie _onchange -> {
   pobierz_element_DIV.zmień_jego_zawartość = this.zawartość_textarea //tu this wskazuje na textarea właśnie
}
}

[rozny]

Dobra - popełniłem taki kod:

[PHP] pobierz, plaintext 
function print_content() {
   		var content=document.newsletter.tresc.value;
   		document.getElementById('podglad').innerHTML = content;
 	}
[PHP] pobierz, plaintext 

I działa. Funkcję w tej chwili wywołuję zdarzeniem HTML onChange, bo niebardzo wiem jak użyć właściwości _onChange js. Spróbowałem w ten sposób:

[PHP] pobierz, plaintext 
function print_content() {
   		var content=document.newsletter.tresc.value;
   		document.getElementById('tresc').value _onchange -> {
       		document.getElementById('podglad').innerHTML = content;
     		}
 
 	}
[PHP] pobierz, plaintext 

Ale nie działa. Jakaś podpowiedź?

[Niktoś]

Tak patrze i nie mogę zrozumieć ,co chcesz tą liniką osiągnąć:

document.getElementById('tresc').value _onchange ->

[rozny]

Stwierdziłem, że może da się w ten sposób wywołać polecenie. Próbowałem to na chłopski rozum rozwiązać, ale jak widać jest to bzdura

Jak już mówiłem js zająłem się dosłownie kilka dni temu i nie wszystko jest jeszcze dla mnie jasne i oczywiste. Pierwszy kod działa, ale nie w czasie rzeczywistym, a dopiero po opuszczeniu textarea (zdarzenie onChange w tagu <textarea>). Poczytam, może się doczytam jak użyć tego _onchange, jak sugerował kamil4u.

I jeszcze pytanie - bo to w praniu wyszło. W jaki sposób mogę przeparsować zawartość textarea. Bo w tej chwili owszem div się wypełnia treścią, ale np. bez enterów, a mam tam też bbcode, który chciałbym sobie przeparsować. Podejrzewam, że to już zahacza o AJAX?

[Niktoś]

Podejrzewam ,że kamil4u podał Tobie wskazówki,jak to zrobić ,a ty próbowałeś to w prosty sposób skopiować.

[kamil4u]

O AJAX na pewno nie zahacza.

Jak sam mówiłeś nie chciałeś gotowca, więc dałem Ci wskazówki i pseudokod, który nic nie ma wspólnego z takim jakim ma być. Poczytaj w takim razie o zdarzeniach. Polecam: http://webhelp.pl/artykuly/obsluga-zdarzen-w-przegladarkach/ - choć to jest trochę wyższy poziom niż potrzebujesz

Najprościej( choć lepiej używać metody takiej jak w artykule ) piszesz:

Kod

referencja_do_elementu.onchange = function(){
//tu kod dla zdarzenia onchange
}

To samo z każdym innym zdarzeniem. Schemat: referencja.on{nazwa zdarzenia} = function(){ ..... }
Dla onload napiszesz window.onload bo tyczy się to całej strony. Musisz dobrać odpowiednie własności. Poczytaj, popatrz na inne kody i powinno Ci się udać. Co do reszty problemów to najpierw uporaj się z tym, a później będziemy walczyć dalej

[rozny]

Czytam i kombinuję, ale coś nie idzie...

[PHP] pobierz, plaintext 
function print_content() {
 
	var content = document.newsletter.tresc.value;
 
	    	document.getElementById('podglad').innerHTML = content;
 
	}
 
	var zdarzenie = document.getElementById('tresc');
	zdarzenie.onchange = print_content;
[PHP] pobierz, plaintext 

Sugerując się kodem zawartym w artykule, który mi podałeś urodziłem coś takiego. Nie działa Stwierdziłem, że logicznym byłoby nasłuchiwać na zdarzenie, bo skąd skrypt ma wiedzieć, że coś się zmieniło skoro nie chcę tego wywoływać za pomocą html onchange. Dopisałem więc

[PHP] pobierz, plaintext 
document.addEventListener(onchange, print_content, false);
[PHP] pobierz, plaintext 

Ale i tak nic mi to nie dało.

Wydaje mi się, że w jakiś sposób powinienem przekazać do skryptu zawartość przez this.value, ale z drugiej strony przecież robię to za pomoca tej linijki:

[PHP] pobierz, plaintext 
var content = document.newsletter.tresc.value;
[PHP] pobierz, plaintext 

Bez przykładu chyba trudno mi będzie połapać się co robię nie tak.

Nie za bardzo rozumiem też w jaki sposób miałbym użyć zdarzenia document.onload, o którym wspominałeś w swoim pierwszym poście. Na chwilę obecną rozumiem tyle, że potrzebne by mi to było do sprawdzenia, czy dokument w ogóle został załadowany. Czyli sparowanie z ifami i jeśli załadowany, to wykonaj kod, a jeśli nie to nic nie rób. Tylko, po co mi to?

[kamil4u]

Jest to po to, że teraz odwołujesz się do elementu, którego nie ma Nie ma go bo nie jest zładowany. Dlatego zawsze trzeba poczekać na załadowanie się elementu i dopiero wtedy go wyszukać. Po to jest zdarzenie onLoad( do załadowania DOM-u istnieje też inne zdarzenie(lepsze), ale na razie je zostawmy ).

Kod

onload = function(){
//tu masz załadowany DOM
};

Jak Ci się uda to poprawię Twój kod, żeby był lepszy. Ale najpierw właśnie spróbuj zrobić, żeby działało. Aha! Zawsze patrz co pokazuje konsola błędów JS. Jako przyszyły programista JS to narzędzie jest Ci bardzo potrzebne.

Do dzieła !

[rozny]

onload stosujemy na <body> tak? Teraz to rozumuję tak, że powinienem dać:

[HTML] pobierz, plaintext 
<body onload="print_content();">
[HTML] pobierz, plaintext 

W ten sposób "coś" się dzieje. Tzn div, który domyślnie ma zawartość "aaaaaa" drukuje się "pusty", bo element textarea nie posiada żadnej wartości. Ale dodanie jakiejkolwiek treści w textarea nie zmienia już zawartości diva.

Kod wygląda tak:

[PHP] pobierz, plaintext 
function print_content() {
 
		var content = document.newsletter.tresc.value;
 
	    	document.getElementById('podglad').innerHTML = content;
 
    		var zdarzenie = document.getElementById('tresc');
 
                zdarzenie.onchange = print_content;
 
		this.addEventListener(onload, print_content, false);
 
	}
[PHP] pobierz, plaintext 

Dwie ostatnie linijki teoretycznie powinny dać ten sam wynik?
I co mnie zastanawia, to to że wewnątrz funkcji print_content() odwołuję się do funkcji... print_content(), co zdaje mi się być kompletną bzdurą

Jeżeli chodzi o konsolę błędów, to nie zwraca żadnego błędu...

Ten post edytował rozny 2.03.2012, 15:09:53

[kamil4u]

Nie nie nie Nie dawaj żadnego onload w body. W ogóle zapomnij o atrybutach onload. onclick, onchange itd. . Używaj kodu JS tylko w plikach JS. Dałem Ci poprzednim razem gotowca. Ponieważ już jesteś naprawdę blisko to tu w pełni poprawny kod:

[JAVASCRIPT] pobierz, plaintext 
<textarea id="textarea"></textarea> <br> <hr> <br>
<div id="div"></div>
 
<script>
onload = function(){
 document.getElementById('textarea').onchange = function(){ //wstaw sobie tu inne zdarzenia np. onkeydown
  document.getElementById('div').innerHTML = this.value;
 }
}
</script>
[JAVASCRIPT] pobierz, plaintext 

Napisz dokładnie czego nie rozumiesz i co Ci wyjaśnić bardziej. I poczytaj więcej o DOM, zdarzeniach itd. bo widać, że jeszcze tego nie rozumiesz
Np. o addEventListener całkowicie nie zrozumiałeś, dlatego na początek proponuję korzystać z przypisywania zdarzeń w taki sposób jak w powyższym kodzie, żebyś jeden sposób załapał porządnie.

[rozny]

Dzięki, ale jednak nie o to mi chodzi. To co mi podałeś, napisałem już wcześniej i mój kod działał na zdarzenie onchange. Twój kod działa dokładnie tak samo - piszę w textarea i nic się nie zmienia, dopiero kiedy wyjdę z edycji textarea zawartość diva się zmienia. A ja chcę, żeby zawartość diva zmieniała się w trakcie pisania w textarea, czyli w textarea piszę "a" i dokładnie w tym samym momencie "a" pojawia się w divie...

[Niktoś]

[HTML] pobierz, plaintext 
<textarea id="textarea"></textarea> <br> <hr> <br>
<div id="div"></div>
 
<script>
onload = function(){
 document.getElementById('textarea').onkeydown = function(){ //wstaw sobie tu inne zdarzenia np. onkeydown
  document.getElementById('div').innerHTML = this.value;
 }
}
</script>
[HTML] pobierz, plaintext 

Kolega Ci,napisał praktycznie gotowca,trzeba było tylko zmienić event ,z boku Tobie to zakomentował.W czym masz jeszcze problem?
Może poczytaj o eventach w js.

Ten post edytował Niktoś 4.03.2012, 15:23:15

[rozny]

Faktycznie, gapa ze mnie i przegapiłem to Już wszystko śmiga jak należy, dzięki za pomoc

Teraz muszę to przetrawić pod kątem parsowania treści... Jakieś wskazówki?

O AJAX na pewno nie zahacza.
[...]
Poczytaj, popatrz na inne kody i powinno Ci się udać. Co do reszty problemów to najpierw uporaj się z tym, a później będziemy walczyć dalej

Walczę teraz z kwestią przeparsowania tego wszystkiego przez skrypt PHP, jednak nie widzę innej opcji niż AJAX i XMLHttpRequest. Znowu jak czytam o tym, to niebardzo widzę jakby to miało działać, jeżeli wynik w divie drukujemy "po znaku". Any ideas?

Ten post edytował rozny 4.03.2012, 15:30:30

[Niktoś]

Odpowiedzią może być:
http://www.doman.art.pl/kursjs/kurs/regular.html

[rozny]

Oczywiście, można wszystko przepuścić przez wyrażenia regularne, z tym że w tym celu musiałbym napisać kolejny kod, a dokładnie to samo mam już naklepane w PHP. Zastanawiam się teraz nad sensownością pisania dwa razy tego samego, tylko po to by wyświetlic poprawnie bbcode w podglądzie zdarzenia. Jak sądzicie? Z punktu widzenia szybkości zapewne to rozwiązanie będzie bardziej wydajne niż XmlHttpRequest i zabawa z "ajaxem"... Z drugiej zaś strony, zawsze bym się nauczył czegoś nowego

[Orzeszekk]

Oczywiście, można wszystko przepuścić przez wyrażenia regularne, z tym że w tym celu musiałbym napisać kolejny kod, a dokładnie to samo mam już naklepane w PHP. Zastanawiam się teraz nad sensownością pisania dwa razy tego samego, tylko po to by wyświetlic poprawnie bbcode w podglądzie zdarzenia. Jak sądzicie? Z punktu widzenia szybkości zapewne to rozwiązanie będzie bardziej wydajne niż XmlHttpRequest i zabawa z "ajaxem"... Z drugiej zaś strony, zawsze bym się nauczył czegoś nowego

biblioteka Jquery ma bardzo wygodny ajax, ktory dziala pod kazda przegladarka i wyglada mniej wiecej tak:

$('div#ID_DIVA_KTORY_CHCESZ_ZAPELNIC").load("http://adres", { parametr_post_1: wartosc_parametru_post_1, parametr_post_2: wartosc_parametru_Post_2}, function () { /* funkcja wykonywana po zakonczeniu ładowania (callback) */ } );

zrob sobie tak jak ci wygodnie, a jak twoj portal bedzie odwiedzalo +200 userów jednoczesnie to przepiszesz sobie na najbardziej wydajną wersję.

mi jakby sie nie chcialo pisac wyrazen regularnych 2 raz po stronie klienta to bym zrobil tak. Ustawilbym sobie w onchange edytora tekstowego event handler ktory liczy do 5 sekund i jesli inny klawisz nie zostanie w tym czasie nacisnięty, wysyła ajaxowe żądanie do serwera przesylajac mu jako parametr zawartosc pola tekstowego. Serwer przetwarza to, i odpowiada sparsowanym bbcode przeznaczonym do wyswietlenia w divie. wszystko to mozesz zrobic za pomoca funkcji $(obiekt).load. po stronie serwera wydziel sobie parsowanie kodu bbcode do oddzielnej funkcji ktora przyjmuje za parmetr tekst z bbcode a zwraca np html, umiesc to w oddzielnym pliku php, i ten plik wywołuj przez jquery i voila.

w momencie jak wysyłasz żądanie po 5 sekundach, mozesz do tej funkcji robiącej zapytanie ajaxowe dorzucic rowniez funkcje ktora w divie ustawi jakiegos kręcącego się dookoła gifa zeby bylo widac ze się ładuje i juz, i bedzie fajnie wyglądało.

[rozny]

Poradziłem sobie ze wszystkimi zagadnieniami. Wyszło mi coś takiego:

[PHP] pobierz, plaintext 
onload = function () {
 
		document.getElementById('tresc').onkeyup = function () {
 
		  	var tablicaBBC = new Array(
 
    					new RegExp ('\\[b\\](.*?)\\[\\/b\\]', 'gi'),
    					new RegExp ('\\[u\\](.*?)\\[\\/u\\]', 'gi'),
    					new RegExp ('\\[i\\](.*?)\\[\\/i\\]', 'gi'),
    					new RegExp ('\\[center\\](.*?)\\[\\/center\\]', 'gi'),
    					new RegExp ('\\[url\\](.*?)\\[\\/url\\]', 'gi'),
    					new RegExp ('\\[img\\](.*?)\\[\\/img\\]', 'gi'),
    					new RegExp ('\\[cytat\\](.*?)\\[\\/cytat\\]', 'gi'),
    					new RegExp ('\\[cytat=(.*?)\\](.*?)\\[\\/cytat\\]', 'gi'),
    					new RegExp ('\\[YT\\](.*?)\\[\\/YT\\]', 'gi'),
    					new RegExp ('\\[size=(.*?)\\](.*?)\\[\\/size\\]', 'gi'),
    					new RegExp ('\\[color=(.*?)\\](.*?)\\[\\/color\\]', 'gi'),
    					new RegExp ('\n', 'gi')
				);
 
    		var records = tablicaBBC.length;
 
		var tablicaHTML = new Array(
 
    					'<span style="font-weight: bold;">$1</span>',
    					'<span style="text-decoration: underline;">$1</span>',
    					'<span style="font-style: italic;">$1</span>',
    					'<p style="text-align: center;">$1</p>',
    					'<a href="http://$1">$1</a>',
    					'<img src="$1" border="0" />',
    					'<fieldset class="quote">$1</fieldset>',
    					'<fieldset class="quote"><legend>$1:</legend>$2</fieldset>',
    					'<iframe width="560" height="315" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>',
    					'<span style="font-size: $1em;">$2</span>',
    					'<span style="color: $1;">$2</span>',
    					'<br />'
 
  				);
 
		function parse_bbcode(input) {
 
    			for (var i = 0; i < records; i++) {
 
	        		input = input.replace(tablicaBBC[i], tablicaHTML[i]);
 
	      		}
 
	      		document.getElementById('podglad').innerHTML = input;
 
	 	}
	 	parse_bbcode(this.value);
 
		}
}
[PHP] pobierz, plaintext 

Pewnie nie jest to jakoś nadzwyczajnie eleganckie, ale działa