Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Wizualizacja długości łańcucha znaków

piątek,

Wizualizacja długości łańcucha znaków

W materiale zaprezentowano mechanizmy języka JavaScript mogące posłużyć do wizualnej sygnalizacji poczynań użytkownika. Przykładowy skrypt może być zastosowany podczas ustawiania hasła przez użytkownika jako weryfikacja minimalnej wymaganej długości hasła. Dodając kolejne warunki, udoskonalisz kontrolę złożoności wpisanego hasła. Wykorzystując prezentowane mechanizmy, można zbudować wiele funkcjonalności strony internetowej, np. pasek postępu wypełnianego formularza, kontrolę poprawności wypełnionych pól itd. Po niewielkiej modyfikacji pasek będzie działać odwrotnie, tzn. jego szerokość będzie się zmniejszać.

Demonstracja skryptu

Kod HTML

Aby odseparować kod HTML wykorzystywany przez skrypt, umieszczono go w pojemniku opatrzonym identyfikatorem (div#tester). Prezentowany kod to dwa elementy występujące w formularzach oraz kolejny pojemnik służący do wyświetlania paska, którego szerokość zależy od ilości znaków wpisanych przez użytkownika.

<div id="tester">
<label>Wprowadź tekst: <input type="text"></label>
<div style="width: 0; height: 10px;"></div>
</div>

Kod JavaScript

W skrypcie wykorzystano zdarzenie (event) o nazwie keyup oznaczające zwolnienie wciśniętego przez użytkownika klawisza. Zdarzenie to przechwytywane jest polu input. Na początku szerokość paska ustawiona jest na zero i nie widać go na ekranie. Po wykryciu wpisania lub usunięcia znaku (lub znaków przy przytrzymaniu klawisza przez chwilę) pasek otrzymuje szerokość równą ilości znaków znajdujących się w monitorowanym elemencie pomnożonej przez dziesięć i wyrażonej w pikselach. Mnożenie zastosowano, aby zmiany szerokości były bardziej widoczne. Dodatkowo po przekroczeniu pięciu znaków, pasek zmienia kolor.

document.querySelector('#tester input').addEventListener('keyup', function() {
  w=document.querySelector('#tester div');
  w.style.width=this.value.length*10 + 'px';
  if(this.value.length>5) w.style.backgroundColor='green';
  else w.style.backgroundColor='red';
})
Artykuł: Podstawowe style CSS dla formularza

Podstawowe style CSS dla formularza

Artykuł: Powstanie zabajkalskie

Powstanie zabajkalskie

Artykuł: JS: Obsługa kółka myszy

JS: Obsługa kółka myszy

Artykuł: Rocznica urodzin Stanisława&nbsp;Skalskiego

Rocznica urodzin Stanisława Skalskiego

Artykuł: Tadeusz Karnkowski

Tadeusz Karnkowski

Artykuł: Józef Olszyna-Wilczyński

Józef Olszyna-Wilczyński

Nasze technikum

Szkoły dla dorosłych

Pełna oferta edukacyjna