Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Rozciągający się input
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
IIFF
Nie chce by rozciągał się "na żywo", ale mam pewną grupę inputów które muszą się "dostosowywać do długiści własnej treści", a ręcznie to za dużo roboty, porpstu by po odświeżeniu strony miał taką długość jak tekst wpisany w nim. Strona prosta, w html tylko, więc chyba pójdzie łatwo. smile.gif
Sephirus
Hmmm To nie jest do końca takie proste wink.gif

Ale proponuje użyć czegoś takiego:

  1. <input type="text" name="nazwa" onkeyup="autoExpand(this)"/>
  2.  
  3. <script type="text/javascript">
  4.  
  5. function autoExpand(obj)
  6. {
  7. obj.style.width = '100px';
  8. obj.style.width = parseInt(obj.scrollWidth) + 20 + 'px';
  9. }
  10.  


Kilka słów objaśnienia. To akurat działa w trybie rzeczywistym. Pierwsza linijka funkcji przywraca domyślną szerokość inputa użyłem 100px - jest to przydatne gdy kasujemy tekst. Do szerokości dodaje jakąś liczbę pikseli żeby nie było ucinania literek ;P lepiej żeby było trochę dłuższe niż za krótkie. I najważniejsze - jeżeli twój input ma ustawiony jakiś padding na lewo/prawo to musisz przetestować ten kod na paru przeglądarkach bo wiem, że niektóre wliczają w scrollWidth także padding więc może wystąpić potrzeba odjęcia paddingu od szerokości inputa wink.gif wyjdzie w praniu

HTH! wink.gif
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.