html textarea

HTML – ograniczenie ilości linii w polu textarea
28 października 2016 | Ogólne

Czasem zdarza się, że na pozór proste zadanie od klienta nabiera zupełnie innego wymiaru w momencie, gdy po zaprogramowaniu formularza, klient stwierdza, że nie wie co to jest HTML i jakieś textarea ale chce aby w danym polu można było wpisać tylko 2 linie tekstu.

Jako, że front-endowiec miał za dużo na głowie, musiałem sam poszukać rozwiązania. Kilka chwil później miałem gotowe wstępne rozwiązanie bazujące na źródłach ze stackoverflow. Niestety, chwila testów i okazywało się, że to i 3 kolejne doskonałe rozwiązania nie mają za bardzo szansy przejść walidację u klienta.

Chodziło mianowicie o takie ograniczenie pola textarea aby użytkownik nie mógł wpisać więcej niż X linii i dokładnie taki sam wygląd miał mieć ekran wprowadzania danych jak i podglądu.

O ile z samym podglądem poradziłem sobie w miarę prosto, przekazując dane z textarea w edycji do textarea w podglądzie, które było właściwie ostylowane aby nie wyglądało jak textarea, o tyle ograniczenie do 2 linii stanowiło dużo większe wyzwanie.

Wiele godzin później, czytania dokumentacji HTML, JS oraz testów, testów i jeszcze raz testów okazało się, że rozwiązanie jest dosyć proste.

 

 

<html>
 <head>
 <script>
 textarea_content = 0; //zmienna globalna

function limitLines(obj, e)
 {

var keynum //zmienna która przetrzymywać będzie notyfikację przycisku.

if(window.event)
 {
 keynum = e.keyCode;
 }
 // Netscape/Firefox/Opera
 else if(e.which)
 {
 keynum = e.which;
 }

if (obj.scrollHeight > obj.clientHeight) //jeżęli wysokość scrolla jest wyższa niż wysokość klienta
 {
 obj.value = textarea_content;        //przywołujemy wartość zmiennej globalnej
 }
 else
 {
 textarea_content = obj.value         //przypisujemy wartość do zmiennej globalnej
 }

}

</script>

</head>

<body>
 <form name="ogloszenia_dodaj">
 <div class="row main-row">
 <legend class="text-uppercase">Wymogi dodatkowe, opis</legend>
 <div class="wyjasnienie">
 <label for="wyjasnienie" class="">Wyjasnienie</label>
 <textarea rows="2" maxlength="32" cols="16" style=" overflow:hidden; resize:none; text-rendering: optimizeLegibility;"
 onkeypress="return limitLines(this, event)"
 onkeyup="return limitLines(this, event)"></textarea>

<!-- pole textarea jest ograniczone do 2 linii, 32 znaków i 16 kolumn (przy zastosowaniu optimizeLegibility
 również oznacza to ilośc znaków).
 Podłączone style zapewniają w kolejności, ze scroll się nie pokaże gdy wjechali byśmy do 3 linii,
 nie będzie można również zwiększać wielkości pola textarea oraz, że znaki będą zajmowały taką samą przestrzeń
 czy to "M" czy "i".
 Zdarzenia podpięte pod pole textarea to onkeypress, który działa po każdym przesłanym do pola znaku oraz onkeyup,
 który działa po zwolnieniu przycisku klawiatury. Sam onkeypress jest jako zabezpieczenie przed osobami, które trzymają
 bardzo długo palec na klawiaturze :) -->
 </div>
 </div>
 </form>
 </body>
 </html>

 

 

Teraz omówmy sobie co osiągnęliśmy poprzez wykorzystanie ww kodu:

  • w jednej linii zapiszemy zawsze maksymalnie 16 znaków
  • w całym polu zapiszemy maksymalnie 32 znaki
  • skrypt jest odporny na osoby trzymające przycisk na klawiaturze w nieskończoność
  • skrypt w momencie gdy „niewidoczny” scroll będzie większy niż pole textarea przywróci poprzednią wartość.
    ograniczenie pola textarea do 2 linii (chociaż na moment kursor przeskoczy do 3)

 

Nie twierdzę przy tym, że rozwiązanie powyższe jest najlepsze i jedyne do spełnienia wymogów 2 linii tekstu. Jest natomiast pierwszą koncepcją,
którą uzyskałem i została zaakceptowana przez Klienta w odniesieniu do jego wymogów.

 

Jeżeli ktoś posiada wiedzę, rozwiązanie lepsze, wydajniejsze i odporne na działania użytkownika, niechaj nie lęka się i opisze je w komentarzu.

 

 

Komentarze


Oddział Staszów:

Adres: ul. Krakowska 49/2
28-200 Staszów

Godziny otwarcia:
pon-pt - [9:00-17:00], sb - [8:00-12:00]

E-mail: info@arkonsoft.pl

Telefon: 883-773-960

Oddział Lublin:

Godziny otwarcia:
pon-pt - [9:00-17:00]

E-mail: info@arkonsoft.pl

Telefon: 883-773-020

Oddział Warszawa:

Adres: ul. Cypryjska 2a
02-761 Warszawa

Godziny otwarcia:
pon-pt - [9:00-17:00]

E-mail: info@arkonsoft.pl

Telefon: 883-773-960