Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Rozciągający się input, Proporcjonalnie do wpisanego tekstu
IIFF
post 21.08.2011, 13:03:15
Post #1





Grupa: Zarejestrowani
Postów: 73
Pomógł: 0
Dołączył: 4.11.2008

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


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
Go to the top of the page
+Quote Post
Sephirus
post 21.08.2011, 22:00:09
Post #2





Grupa: Zarejestrowani
Postów: 1 527
Pomógł: 438
Dołączył: 28.06.2011
Skąd: Warszawa

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


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


--------------------
If you're good at something, never do it for free.
Potrzebujesz skryptu JS lub PHP - szukasz kogoś kto przetestuje twoją aplikację pod względem bezpieczeństwa? Szybko i solidnie? Napisz ;)
Mój blog - Jak zwiększyć wydajność front-endu - O buforowaniu wyjścia w PHP słów kilka...
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 16.06.2025 - 19:42