Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Dopasowująca się wysokość textarea
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
8rol
15.06.2011, 13:05:54
Witam.

Przekopałem już mnóstwo stron i wątków, ale nadal nie udało mi się znaleźć dokładnie tego czego szukam.

Poszukuję funkcji w JS (próbowałem na różne sposoby za pomocą CSS'a ale bez skutku), która automatycznie dopasowywałaby wysokość textarea do jej zawartości.
Większość tego co znajduje się w internecie ma za zadanie zwiększać rozmiar textarea w miarę jak użytkownik wpisuje więcej tekstu (zwłaszcza nowe linie).
Problem w tym, że funkcję te nie potrafią dopasować rozmiaru textarea z wczytaną do nich już treścią (wstawioną przez PHP). Pomaga dopiero kliknięcie na ten element, lub wpisanie czegoś (w zależności do jakiego zdarzenia przypisana jest funkcja).


Udało mi się znaleźć jedną funkcję która prawie spełnia moje oczekiwania, jednak ze względu na to, że jestem słaby w JS nie potrafię jej dostosować.

[JAVASCRIPT] pobierz, plaintext 
  1. <script type="text/javascript">
  2. var observe;
  3. if (window.attachEvent) {
  4.     observe = function (element, event, handler) {
  5.         element.attachEvent('on'+event, handler);
  6.     };
  7. }
  8. else {
  9.     observe = function (element, event, handler) {
  10.         element.addEventListener(event, handler, false);
  11.     };
  12. }
  13. function init () {
  14.     var text = document.getElementById('text');
  15.     function resize () {
  16.         text.style.height = 'auto';
  17.         text.style.height = text.scrollHeight+'px';
  18.     }
  19.  
  20.     function delayedResize () {
  21.         window.setTimeout(resize, 0);
  22.     }
  23.     observe(text, 'change',  resize);
  24.     observe(text, 'cut',     delayedResize);
  25.     observe(text, 'paste',   delayedResize);
  26.     observe(text, 'drop',    delayedResize);
  27.     observe(text, 'keydown', delayedResize);
  28.  
  29.     text.focus();
  30.     text.select();
  31.     resize();
  32. }
  33. </script>
[JAVASCRIPT] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <body onload="init();">
  2. 	<textarea rows="1" style="height:1em;" id="text"></textarea>
  3. </body>
[HTML] pobierz, plaintext


Chodzi o to, iż funkcja ta odwołuje się do textarea o podanym ID. Na mojej stronie będzie znajdować się ich kilkanaście, a dane ID może występować tylko raz na stronie.

Próbowałem zamienić:
[JAVASCRIPT] pobierz, plaintext 
  1. var text = document.getElementById('text');
[JAVASCRIPT] pobierz, plaintext


na:

[JAVASCRIPT] pobierz, plaintext 
  1. var text = document.getElementsByTagName('textarea');
[JAVASCRIPT] pobierz, plaintext


ale niestety nie działa.

Bardzo proszę o pomoc jak dostosować tę funkcję w taki sposób, aby odwoływała się do wszystkich textarea, lub textarea do danej klasie.
Czytałem, że można to zrobić za pomocą pętli, jednak nie wychodzi mi to.

Z góry dziękuję za pomoc i pozdrawiam.
thek
15.06.2011, 14:48:15
Może coś pod kątem $('textarea').each() ? Zobacz na dokumentację each() w jQuery, bo może o to Ci chodzi...
kamil4u
15.06.2011, 15:34:28
Twój kod:
Kod
    var text = document.getElementsByTagName('textarea');

Zwraca tablicę elementów. Zastosuj taki kod:
[JAVASCRIPT] pobierz, plaintext 
  1. els = document.getElementsByTagName('textarea');
  2. for( i=0; el = els[i++]; ){
  3.  //w tej pętli zmienna el - przyjmuje kolejne referencję do elementów textarea
  4. }
[JAVASCRIPT] pobierz, plaintext


Pamiętaj, żeby z els, el i i zrobić zmienne lokalne.


@thek: Dokładnie o to chodzi, ale po co pchać do tego całą bibliotekę?

8rol
15.06.2011, 18:17:24
Dzięki, zrobiłem według twoich wskazówek i teraz textarea dopasowuje się do wstawionej uprzednio treści jednak przestało działać automatyczne rozciąganie się wraz z wpisywaniem.

Poniżej kod:

[JAVASCRIPT] pobierz, plaintext 
  1. var observe;
  2. if (window.attachEvent) {
  3.     observe = function (element, event, handler) {
  4.         element.attachEvent('on'+event, handler);
  5.     };
  6. }
  7. else {
  8.     observe = function (element, event, handler) {
  9.         element.addEventListener(event, handler, false);
  10.     };
  11. }
  12. function init () {
  13.     var els;
  14. 	var text;
  15. 	var i;
  16.  
  17. 	els = document.getElementsByTagName('textarea');
  18.     for( i=0; text = els[i++]; ){
  19.  
  20.  
  21. 		function resize () {
  22.         text.style.height = 'auto';
  23.         text.style.height = text.scrollHeight+'px';
  24. 		}
  25. 		/* 0-timeout to get the already changed text */
  26. 		function delayedResize () {
  27. 			window.setTimeout(resize, 0);
  28. 		}
  29. 		observe(text, 'change',  resize);
  30. 		observe(text, 'cut',     delayedResize);
  31. 		observe(text, 'paste',   delayedResize);
  32. 		observe(text, 'drop',    delayedResize);
  33. 		observe(text, 'keydown', delayedResize);
  34.  
  35. 		text.focus();
  36. 		text.select();
  37. 		resize();
  38.     }
  39.  
  40. }
[JAVASCRIPT] pobierz, plaintext
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.