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ł: Nowości w szkolnej bibliotece

Nowości w szkolnej bibliotece

Artykuł: Polska flaga nad Monte Cassino

Polska flaga nad Monte Cassino

Artykuł: Data Encryption Standard

Data Encryption Standard

Artykuł: Jan Jaworowski

Jan Jaworowski

Artykuł: Jerzy Drzewiecki

Jerzy Drzewiecki

Artykuł: Komputer Z3

Komputer Z3

Nasze technikum

Technik informatyk

Szkoły dla dorosłych

Nasza szkoła

Pełna oferta edukacyjna

Oferta szkoły