Câmpuri text
Elementele <input type="text"> sunt destinate pentru introducerea celor mai simple informații textuale:
<input type="text" name="key" size="10" maxlength="15" value="hello world" />Acest element suportă o serie de evenimente, în special:
- focus: apare când se obține focusul
- blur: apare când se pierde focusul
- change: apare când valoarea câmpului se schimbă
- input: apare când valoarea câmpului se schimbă
- select: apare când textul din câmpul text este selectat
- keydown: apare când este apăsată o tastă
- keypress: apare când este apăsată o tastă pentru caractere tipăribile
- keyup: apare când o tastă apăsată anterior este eliberată
Aplicăm o serie de evenimente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form name="search">
<input type="text" name="key" placeholder="Introduceți cheia" />
<input type="button" name="print" value="Tipărire" />
</form>
<div id="printBlock"></div>
<script>
const keyBox = document.search.key;
// handler pentru schimbarea textului
function onchange(e){
// obținem elementul printBlock
const printBlock = document.getElementById("printBlock");
// obținem noua valoare
const val = e.target.value;
// setăm valoarea
printBlock.textContent = val;
}
// handler pentru pierderea focusului
function onblur(e){
// obținem valoarea lui și eliminăm toate spațiile
const text = keyBox.value.trim();
if(text==="")
keyBox.style.borderColor = "red";
else
keyBox.style.borderColor = "green";
}
// obținerea focusului
function onfocus(e){
// setăm culoarea border-ului câmpului
keyBox.style.borderColor = "blue";
}
keyBox.addEventListener("change", onchange);
keyBox.addEventListener("blur", onblur);
keyBox.addEventListener("focus", onfocus);
</script>
</body>
</html>Aici, la câmpul text sunt atașate trei handlere pentru evenimentele blur, focus și change. Handlerul pentru evenimentul change permite formarea unei legături: când textul se schimbă, tot textul este afișat în blocul printBlock. Dar trebuie luat în considerare că evenimentul change nu apare imediat după schimbarea textului, ci după ce acesta își pierde focusul.
Handlerul pentru evenimentul de pierdere a focusului blur permite validarea valorii introduse. De exemplu, în acest caz, dacă textul constă din spații sau nu a fost introdus, atunci colorăm border-ul câmpului în roșu.
Modificarea textului în JavaScript
Pe lângă evenimentul change, putem procesa modificarea textului introdus, procesând evenimentul input. Dar dacă evenimentul change apare când utilizatorul termină de introdus textul și schimbă focusul de la câmpul text la alt element, evenimentul input apare imediat la introducerea unui nou caracter sau la ștergerea unuia existent:
const keyBox = document.search.key;
// handler pentru schimbarea textului
function oninput(e){
// obținem elementul printBlock
const printBlock = document.getElementById("printBlock");
// obținem noua valoare
printBlock.textContent = val;
}
keyBox.addEventListener("input", oninput);Câmp pentru introducerea parolei
În afara câmpului text menționat, există și câmpuri speciale pentru introducere. Astfel, câmpul <input type="password"> este destinat pentru introducerea parolei. Funcțional, este foarte asemănător cu câmpul text obișnuit, cu excepția faptului că pentru caracterele introduse se folosește o mască:
<input type="password" name="password" />Cu toate acestea, valoarea introdusă nu este criptată în niciun fel, și o putem obține fără probleme:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<form name="loginForm">
<input type="password" name="password" />
</form>
<div id="printBlock"></div>
<script>
const passwordBox = document.loginForm.password;
// handler pentru schimbarea textului
function oninput(e){
// obținem elementul printBlock
const printBlock = document.getElementById("printBlock");
// obținem noua valoare
printBlock.textContent = e.target.value;
}
passwordBox.addEventListener("input", oninput);
</script>
</body>
</html>
Câmp ascuns
Dacă avem nevoie ca pe formular să existe o anumită valoare, dar să fie ascunsă de utilizator, atunci putem folosi câmpuri ascunse:
<input type="hidden" name="id" value="345" />Pentru câmpul ascuns, de obicei, nu se utilizează procesarea evenimentelor, dar la fel ca pentru alte elemente, putem obține sau schimba valoarea lui în JavaScript.
Elementul textarea
Pentru crearea câmpurilor text multilinie se utilizează elementul textarea:
<textarea rows="15" cols="40" name="textArea"></textarea>Acest element generează aceleași evenimente ca și câmpul text obișnuit:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form name="search">
<textarea rows="7" cols="40" name="message"></textarea>
</form>
<div id="printBlock"></div>
<script>
const messageBox = document.search.message;
// handler pentru introducerea unui caracter
function onkeypress(e){
// obținem elementul printBlock
const printBlock = document.getElementById("printBlock");
// obținem caracterul introdus
const val = String.fromCharCode(e.keyCode);
// adăugăm caracterul
printBlock.textContent += val;
}
function onkeydown(e){
if(e.keyCode===8){ // dacă este apăsat Backspace
// obținem elementul printBlock
const printBlock = document.getElementById("printBlock"),
length = printBlock.textContent.length;
// tăiem șirul până la ultimul caracter
printBlock.textContent = printBlock.textContent.substring(0, length-1);
}
}
messageBox.addEventListener("keypress", onkeypress);
messageBox.addEventListener("keydown", onkeydown);
</script>
</body>
</html>Aici la câmpul text sunt atașate handlere pentru evenimentele keypress și keydown. În handlerul keypress obținem caracterul introdus prin conversia codului numeric al tastei în șir:
const val = String.fromCharCode(e.keyCode);Apoi caracterul este adăugat la conținutul blocului printBlock.
Evenimentul keypress apare la apăsarea tastelor pentru caracterele tipăribile, astfel caracterele sunt afișate în câmpul text. Totuși, există și alte taste care influențează câmpul text, dar nu oferă un caracter vizibil, așa că nu sunt detectate de evenimentul keypress.
Printre aceste taste se numără tasta Backspace, care șterge ultimul caracter. Pentru a detecta aceasta, de asemenea, procesăm evenimentul keydown. În handlerul keydown, ștergem din șirul din blocul printBlock ultimul caracter.
