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';
})
