Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Dopasowująca się wysokość textarea, Również dla wpisanej już treści.
8rol
post
Post #1





Grupa: Zarejestrowani
Postów: 66
Pomógł: 0
Dołączył: 10.10.2009

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
thek
post
Post #2





Grupa: Moderatorzy
Postów: 4 362
Pomógł: 714
Dołączył: 12.02.2009
Skąd: Jak się położę tak leżę :D
Może coś pod kątem $('textarea').each() ? Zobacz na dokumentację each() w jQuery, bo może o to Ci chodzi...
Go to the top of the page
+Quote Post
kamil4u
post
Post #3





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

Ostrzeżenie: (0%)
-----

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ę?
Go to the top of the page
+Quote Post
8rol
post
Post #4





Grupa: Zarejestrowani
Postów: 66
Pomógł: 0
Dołączył: 10.10.2009

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 18:07
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn