Evenimente de intrare. Evenimente de formă și control

Acesta este un test. Verifică, verifică, verifică.

. Rețineți că folosește proprietatea this.parentNode. Aceasta înseamnă că întregul element container se va mișca.

Evenimente de introducere a textului

Browserele acceptă trei evenimente de introducere a tastaturii vechi. Evenimentele keydown și keyup sunt evenimente de nivel scăzut și sunt acoperite în secțiunea următoare. Cu toate acestea, evenimentul apăsarea tastei este un semnal de nivel înalt că a fost introdus un caracter imprimabil.

Proiectul de specificație pentru evenimente de nivel 3 DOM definește un eveniment mai general introducerea textului, generat ca răspuns la introducerea textului, indiferent de modul în care a fost introdus.

Cu evenimentul textinput propus și cu evenimentul textInput implementat în prezent, este trecut un obiect eveniment simplu care are o proprietate de date care stochează textul introdus. (O altă proprietate propusă de specificație, inputMethod, ar trebui să specifice sursa intrării, dar nu este încă implementată.) Pentru introducerea de la tastatură, proprietatea de date va conține de obicei un singur caracter, dar pentru intrarea din alte surse poate conține multe caractere .

Obiectul eveniment transmis cu evenimentul apăsat taste are o organizare mai complexă. Evenimentul de apăsare a tastei reprezintă introducerea unui singur caracter. Acest caracter este conținut în obiectul eveniment ca valoare numerică a punctului de cod Unicode și pentru a-l converti într-un șir, trebuie să utilizați metoda String.fromCharCode(). În majoritatea browserelor, punctul de cod al caracterului introdus este stocat în proprietate cod cheie obiect eveniment. Cu toate acestea, din motive istorice, Firefox folosește proprietatea în schimb charCode.

În majoritatea browserelor, evenimentul de apăsare a tastei este declanșat numai atunci când este introdus un caracter imprimabil. Cu toate acestea, în Firefox, evenimentul de apăsare a tastei este declanșat și pentru caracterele care nu se imprimă. Pentru a distinge între aceste două cazuri (și a ignora caracterele neprintabile), puteți verifica dacă proprietatea charCode a obiectului eveniment există și dacă conține valoarea 0.

Evenimentele de introducere text, textInput și apăsare de taste pot fi anulate pentru a preveni introducerea unui caracter. Adică, aceste evenimente pot fi folosite pentru a filtra intrarea. De exemplu, puteți împiedica introducerea caracterelor alfabetice într-un câmp destinat introducerii datelor numerice.

Exemplul de mai jos demonstrează un modul pe JavaScript, care implementează acest tip de filtrare. Se caută elemente cu un atribut suplimentar (non-standard) data-allowed-chars. Înregistrează textinput, textInput și handlere de evenimente de apăsare de taste pentru toate elementele găsite și limitează introducerea la caracterele expresiei regulate specificate în atributul data-allowed-chars:

/* Filtru de intrare pentru elemente Acest modul găsește toate elementele în documentul care au atributul „data-allowed-chars”. Înregistrează apăsarea tastelor, introducerea textului și gestionanții de evenimente textInput pentru aceste elemente pentru a restricționa setul de caractere permis pentru introducere pentru a permite introducerea numai a caracterelor specificate în atribut. Dacă elementul are, de asemenea, un atribut „data-messageid”, valoarea acestui atribut este interpretată ca id-ul altui element de document. Dacă utilizatorul introduce un caracter nevalid, elementul cu id-ul specificat devine vizibil. Dacă utilizatorul introduce un caracter valid, elementul de mesaj este ascuns. Acest obiect cu un mesaj are scopul de a afișa o explicație a motivului pentru care a fost respinsă intrarea utilizatorului. Designul său trebuie implementat folosind CSS, astfel încât să fie inițial invizibil. */ whenReady(funcția () ( // Apelați această funcție când documentul este încărcat // Găsiți toate elementele var inputelts = document.getElementsByTagName("input"); // Buclă prin ele în for(var i = 0 ; i< inputelts.length; i++) { var elt = inputelts[i]; // Пропустить элементы, не являющиеся текстовыми полями ввода // и не имеющие атрибута data-allowed-chars if (elt.type != "text" || !elt.getAttribute("data-allowed-chars")) continue; // Зарегистрировать наш обработчик события в этом элементе input // keypress старое событие и реализовано во всех браузерах. // textInput поддерживается в Safari и Chrome с 2010 года. // textinput версия проекта стандарта "DOM Level 3 Events". if (elt.addEventListener) { elt.addEventListener("keypress", filter, false); elt.addEventListener("textInput", filter, false); elt.addEventListener("textinput", filter, false); } // textinput не поддерживается версиями IE, в которых не реализован // метод addEventListener() else { elt.attachEvent("onkeypress", filter); } } // Обработчик событий keypress и textInput, фильтрующий ввод пользователя function filter(event) { // Получить объект события и целевой элемент target var e = event || window.event; // Модель стандартная или IE var target = e.target || e.srcElement; // Модель стандартная или IE var text = null; // Введенный текст // Получить введенный символ или текст if (e.type === "textinput" || e.type === "textInput") text = e.data; else { // Это было событие keypress // Введенный печатаемый символ в Firefox сохраняется в свойстве charCode var code = e.charCode || e.keyCode; // Если была нажата какая либо функциональная клавиша, не фильтровать ее if (code < 32 || // Управляющий caracter ASCII e.charCode == 0 || // Tasta funcțională (în Firefox) e.ctrlKey || e.altKey) // Tasta modificatoare care trebuie apăsată return; // Nu filtrați acest eveniment // Convertiți codul caracterului într-un șir var text = String.fromCharCode(code); ) // Găsiți informațiile de care avem nevoie în acest element input var allowed = target.getAttribute("data-allowed-chars"); // Caractere valide var messageid = target.getAttribute("data-messageid"); // Id-ul mesajului if (messageid) // Dacă este specificat id, obțineți elementul var messageElement = document.getElementById(messageid); // Parcurge caracterele din textul introdus for(var i = 0; i< text.length; i++) { var c = text.charAt(i); allowed = new RegExp(allowed, "i"); // Создаем expresie uzuala if (c.search(allowed) == -1) ( // Caracter ilegal? // Afișează elementul cu mesaj dacă este specificat if (messageElement) messageElement.style.visibility="visible"; // Ignorați acțiunile implicite pentru a preveni inserarea textului if (e.preventDefault) e.preventDefault(); if (e.returnValue) e.returnValue = false; return false; ) ) // Dacă toate caracterele sunt valide, ascunde elementul // cu un mesaj dacă a fost specificat dacă (messageElement) messageElement.style.visibility = "ascuns"; ) ));

Mai jos este o mostră Marcaj HTML folosind acest modul:

Vă rugăm să completați formularul.

Informații de contact

Nume Doar scrisori
Telefon Numai numere
E-mail Email incorect

Figura de mai jos arată utilizarea acestui formular. Aici, după ce am introdus numele, am introdus un număr, care a fost blocat automat și a apărut un mesaj de avertizare:

Evenimentele de apăsare a tastelor și de introducere a textului sunt declanșate chiar înainte ca textul nou să fie inserat efectiv în elementul de document care are focalizarea de intrare, astfel încât gestionanții pentru aceste evenimente pot împiedica inserarea textului prin anularea evenimentului.

Browserele implementează, de asemenea, evenimentul intrare, care este declanșat după ce textul este inserat în element. Acest eveniment nu poate fi anulat și obiectul eveniment corespunzător nu conține informații despre textul inserat - pur și simplu notifică faptul că conținutul text al elementului s-a schimbat. Dacă, de exemplu, doriți să vă asigurați că sunt introduse numai caractere majuscule, puteți defini un handler de evenimente de intrare, așa cum se arată mai jos:

Evenimentul de intrare este standardizat în specificația HTML5 și este acceptat de toată lumea browsere moderne, cu excepția IE. Un efect similar în IE poate fi obținut prin detectarea unei modificări a valorii proprietății valorii element de text introducerea utilizând un eveniment non-standard schimbare de proprietate.

Evenimente de la tastatură

Evenimente Tasta în josȘi tastare declanșat atunci când utilizatorul apasă sau eliberează o tastă de pe tastatură. Acestea sunt generate pentru tastele modificatoare, tastele funcționale și tastele alfanumerice. Dacă utilizatorul ține apăsată o tastă suficient de mult pentru a declanșa modul de repetare automată, multe evenimente de tastare vor fi generate înainte ca evenimentul de tastare să apară.

Obiectul eveniment corespunzător acestor evenimente are proprietatea cod cheie cu o valoare numerică care identifică tasta apăsată. Pentru cheile care generează caractere imprimabile, în caz general proprietatea keyCode conține punctul de cod Unicode corespunzător caracterului de bază descris pe cheie. Tastele cu litere generează întotdeauna valori keyCode corespunzătoare caracterelor majuscule, indiferent de starea tastei Shift, deoarece acestea sunt caracterele descrise pe taste.

De asemenea, tastele numerice generează întotdeauna valori keyCode corespunzătoare caractere digitale afișat pe taste, chiar dacă ați ținut apăsat Tasta Shift pentru a introduce punctuația. Pentru cheile care nu corespund caracterelor imprimabile, proprietatea keyCode va avea o altă valoare. Aceste valori ale proprietăților keyCode nu au fost niciodată standardizate. Cu toate acestea, în browsere diferite nu diferă atât de mult încât portabilitatea nu poate fi asigurată.

La fel ca obiectele eveniment mouse, obiectele eveniment tastatură au proprietăți AltTasta, ctrlKey, metaKeyȘi shiftKey, care se evaluează la adevărat dacă tasta modificatoare corespunzătoare a fost apăsată atunci când a avut loc evenimentul.

Evenimentele keydown și keyup și proprietatea keyCode au fost utilizate de peste un deceniu, dar nu au fost niciodată standardizate. Schița de evenimente DOM de nivel 3 standardizează tipurile de evenimente keydown și keyup, dar nu standardizează proprietatea keyCode. În schimb, definește o nouă proprietate, cheie, care ar trebui să conțină numele cheii ca șir. Dacă o cheie corespunde unui caracter imprimabil, proprietatea cheie trebuie să conțină acel caracter imprimabil. Pentru tastele funcționale, proprietatea cheii trebuie să conțină valori precum F2, Acasă sau Stânga.

La momentul scrierii acestui articol, proprietatea cheie definită de standardul de evenimente DOM Level 3 nu a fost încă implementată în niciun browser. Cu toate acestea, browserele bazate pe Webkit, Safari și Chrome definesc o proprietate în obiectele acestor evenimente: keyIdentifier. Pentru tastele funcționale, cum ar fi proprietatea cheie, proprietatea keyIdentifier conține nu un număr, ci un șir cu numele tastei, cum ar fi Shift sau Enter. Pentru cheile corespunzătoare caracterelor imprimabile, această proprietate conține o reprezentare șir mai puțin utilizabilă a punctului de cod Unicode al caracterului. De exemplu, tasta A corespunde valorii U+0041.

Exemplul de mai jos definește o clasă Keymap care mapează identificatorii de combinații de taste, cum ar fi PageUp, Alt_Z și ctrl+alt+shift+F5, la funcțiile JavaScript care sunt apelate ca răspuns la aceste combinații de taste care sunt apăsate. Definițiile de legare a tastelor sunt transmise constructorului Keymap() în formular obiect JavaScript, ale căror nume de proprietăți corespund identificatorilor de combinații de taste, iar valorile acestor proprietăți conțin referințe la funcțiile de gestionare. Adăugarea și eliminarea legăturilor se face folosind metodele bind() și unbind().

Obiectul Keymap este instalat într-un element HTML (de obicei un obiect Document) folosind metoda install(). Când un obiect Keymap este setat, un handler de evenimente keydown este înregistrat cu acest element. De fiecare dată când este apăsată o tastă, handlerul verifică dacă există o funcție care corespunde acelei combinații. Dacă funcția există, este apelată.

Managerul de evenimente keydown folosește proprietatea cheie definită de standardul de evenimente de nivel 3 DOM, dacă există. În caz contrar, încearcă să folosească proprietatea Webkit keyIdentifier. Și ca alternativă, handlerul folosește proprietatea non-standard keyCode:

// Funcția de constructor al funcției Keymap(bindings) ( this.map = (); // Definiți identificatorul de mapare->handler if (bindings) ( // Copiați harta inițială de legare în ea pentru (nume în legături) this.bind( nume, legături); ) ) // Leagă identificatorul de cheie specificat la functie specificata handler Keymap.prototype.bind = function(key, func) ( this.map = func; ); // Îndepărtează legarea pentru ID-ul cheii specificat Keymap.prototype.unbind = function(key) ( șterge this.map; ); // Instalează acest obiect Keymap în elementul HTML specificat Keymap.prototype.install = function(element) ( var keymap = this; // Definiți funcțiile de gestionare a evenimentelor function handler(event) ( return keymap.dispatch(event, element); ) // Se setează dacă (element.addEventListener) element.addEventListener("keydown", handler, false); else if (element.attachEvent) element.attachEvent("onkeydown", handler); ); // Această metodă deleagă gestionarea evenimentelor de la tastatură, bazându-se pe legături Keymap.prototype.dispatch = function(event, element) ( // Inițial nu există nume de taste modificatoare sau nume de tastă var modificatori = ""; var keyname = null; // Construiți șiruri de modificatori în formă canonică din // caractere mici, aranjandu-le în ordine alfabetică. modificatori if (event.altKey) += „alt_”; if (event.ctrlKey) modificatori += „ctrl_”; if (eveniment .metaKey) modificatori += "meta_"; if (event.shiftKey) modificatori += "shift_"; // Numele cheii este ușor de obținut dacă proprietatea cheii // definită de standardul DOM Nivelul 3 este implementată: if (event.key ) keyname = event.key; // Pentru a obține nume de taste funcționale în Safari și Chrome, puteți // folosi proprietatea keyIdentifier altfel if(event.keyIdentifier && event.keyIdentifier.substring(0,2) !== „U+” ) keyname = event.keyIdentifier; // În caz contrar, puteți utiliza proprietatea keyCode // și puteți afișa codul > nume de mai jos else keyname = Keymap.keyCodeToKeyName; // Dacă numele cheii nu a putut fi determinat, pur și simplu ignorați evenimentul // și returnați controlul. if (!keyname) return; // Identificatorul cheii canonice constă din numele modificatorilor // și numele tastei cu minuscule var keyid = modificatori + keyname.toLowerCase(); // Verificați dacă există o legătură pentru identificatorul dat chei var handler = this.map; if (handler) ( // Dacă handlerul este pentru o anumită cheie, apelați-o // Apelați funcția handler var retval = handler.call(element, event, keyid); // Dacă handler-ul a returnat false, anulați implicit / / și anulează evenimentele de bule dacă (retval === false) ( dacă (event.stopPropagation) event.stopPropagation(); // Modelul DOM else event.cancelBubble = adevărat; // Model IE if (event.preventDefault) event.preventDefault(); // DOM else event.returnValue = false; // IE ) // Returnează valoarea primită de la handler return retval; )); // Funcție de ajutor pentru a converti identificatorul cheii în formă canonică. // Trebuie să convertim identificatorul „meta” în „ctrl” pentru a transforma // identificatorul Meta-C în „Command-C” pe Mac-uri și în „Ctrl-C” pe toți ceilalți. Keymap.normalize = function(keyid) ( keyid = keyid.toLowerCase(); // Pentru a minuscule var cuvinte = keyid.split(/\s+|[\-+_]/); // Selectați modificatorii var keyname = words . pop(); // keyname este ultimul cuvânt keyname = Keymap.aliases || keyname; // Este acesta un alias? words.sort(); // Sortează modificatorii words.push(keyname); // Pune înapoi standardul name return words .join("_"); // Îmbină totul împreună ) Keymap.aliases = ( // Mapează aliasurile comune ale cheilor cu // numele lor „oficiale” utilizate în DOM Nivelul 3 și mapează codurile cheilor // cu numele de mai jos. Numele și valoarea trebuie să conțină numai litere mici „escape”:”esc”, „return”:”enter”, „delete”:”del”, “ctrl”:”control”, “space”:”spacebar ", "ins":"inserare" ); // Vechea proprietate keyCode a obiectului eveniment keydown nu este standardizată // Dar următoarele valori pot fi utilizate cu succes în majoritatea browserelor și sistemelor de operare. Keymap.keyCodeToKeyName = ( // Tastele cu cuvinte sau săgeți pe ele 8:"Backspace", 9:"Tab", 13:"Enter", 16:"Shift", 17:"Control", 18:"Alt", 19: „Pauză”, 20: „Blocare majuscule”, 27: „Esc”, 32: „Bară de spațiu”, 33: „În sus”, 34: „În pagină”, 35: „Sfârșit”, 36: „Acasă”, 37: „Stânga”, 38: „Sus”, 39: „Dreapta”, 40: „Jos”, 45: „Inserare”, 46: „Del”, // Tastele numerice pe tastatura principală (nu pe cea suplimentară) 48:"0",49:"1",50:"2",51:"3",52:"4",53:"5",54:" 6", 55:"7", 56:"8", 57:"9", // Taste cu litere. Rețineți că nu există nicio distincție între // caracterele de sus și //. litere mici 65:"A", 66:"B", 67:"C", 68:"D", 69:"E", 70:"F", 71:"G", 72:"H", 73: "I", 74:"J", 75:"K", 76:"L", 77:"M", 78:"N", 79:"O", 80:"P", 81:"Q ", 82:"R", 83:"S", 84:"T", 85:"U", 86:"V", 87:"W", 88:"X", 89:"Y", 90: „Z”, // Tastele numerice activate tastatură suplimentarăși taste cu semne de punctuație. // (Nu este acceptat în Opera.) 96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6" ,103:"7", 104:"8", 105:"9", 106:"Înmulțire", 107:"Adaugă", 109:"Scădere", 110:"Decimală", 111:"Împărțire", / / Tastele funcționale 112:"F1", 113:"F2", 114:"F3", 115:"F4", 116:"F5", 117:"F6", 118:"F7", 119:"F8" , 120:"F9", 121:"F10", 122:"F11", 123:"F12", 124:"F13", 125:"F14", 126:"F15", 127:"F16", 128 :"F17", 129:"F18", 130:"F19", 131:"F20", 132:"F21", 133:"F22", 134:"F23", 135:"F24", // Taste cu semne de punctuație care nu necesită // să țineți apăsată tasta Shift. // Cratima nu poate fi folosită într-un mod portabil: FF returnează // același cod ca și pentru tasta Scădere 59:";", 61:"=", 186:";", 187:"=", // Firefox și Opera returnează 59.61 188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222: """);

Mai jos este un exemplu de utilizare a obiectului Keymap:

Window.onload = function() ( var keymap = new Keymap; // Creați un nou obiect Keymap keymap.bind("ctrl+a", // Combinație Ctrl+A function(event, keyid) ( alert("Ați apăsat: " + keyid) )); // O altă legătură Ctrl + Enter keymap.bind("ctrl+enter", function(event, keyid) ( alert("Ați apăsat: " + keyid) )); keymap.install(document. body); // Setați obiectul Keymap pentru întregul document);

Cea mai comună etichetă folosită în formulare este . Nu are o etichetă de închidere. Toate informațiile pe care browserul trebuie să le proceseze sunt conținute direct în etichetă și este specificat folosind diverse atribute. Semantică variază semnificativ în funcție de valoarea atributului său tip.

Atributele etichetei

type Atributul principal care specifică tipul elementului. Dacă atributul nu este specificat, se utilizează valoarea implicită text.
Valori posibile:

Nu toate browserele acceptă tipurile adăugate în HTML5.
Dacă browserul nu acceptă unul dintre noile tipuri, va presupune că este un . Cum se organizează suportul pentru browsere mai vechi este descris folosind exemplul de dată.

Autocomplete="off" Dezactivează completarea automată pentru a acestui domeniu. Foarte util pentru câmpuri de introducere unică a codului, captchas etc. .setAttribute("completare automată","off"); autofocus Primire automată focalizați când pagina se încarcă. Valoarea poate fi setată în trei moduri: ... ... ... Un exemplu de emulare a proprietății de focalizare automată pentru browsere mai vechi. disabled Face elementul inaccesibil. Elementele inaccesibile nu sunt trimise la server. nume Numele câmpului. Fiecare câmp de intrare pe care îl creați trebuie să aibă propriul nume unic, altfel scriptul nu va determina la ce câmpuri se aplică valorile rezultate. Desigur, numele câmpului de intrare trebuie să se potrivească cu numele descris pentru acesta în programul de procesare. value Valoarea implicită a câmpului sau eticheta de pe buton. dimensiune Mărimea câmpului de tip. maxlength Limita numărului de caractere care pot fi introduse într-un câmp de tip . readonly="readonly" sau "" Împiedică modificarea elementului. obligatoriu Verifică automat dacă câmpul este completat.
Pentru a evidenția un câmp obligatoriu completat corect, puteți utiliza următoarea construcție de stil: min Valoarea numărului minim în câmpul de tip număr. max Valoarea numărului maxim într-un câmp de tip număr. pas Pas pentru modificarea numărului în câmpul tip număr. model Şablon câmp de intrare. Verificarea corectitudinii introducerii datelor. Exemple de șabloane pentru modelul de introducere a formularelor html5. Substituent Text indicativ într-un câmp de formular care dispare automat atunci când câmpul primește focus.
Exemplu de setare a stilului de indicație:

În IE și Firefox (până la versiunea 18) substituent este considerată o pseudo-clasă, iar în rest - un pseudo-element.

REZULTAT:

Listă O listă de opțiuni care pot fi selectate atunci când tastați într-un câmp de text.
Această listă este inițial ascunsă și devine disponibilă atunci când câmpul primește focus sau introduce text.

Tipuri de elemente INPUT

Butonul BUTON

Buton BUTON este destinat acelor cazuri în care trebuie să executați un script. Adică, un eveniment este atașat butonului OnСlick iar funcția necesară este numită. Atribut valoare setează eticheta pe buton. Atribut onclick specifică un handler JavaScript care este apelat când se face clic pe butonul. Atribut Nume servește pentru denumirea JavaScript a butonului (nu este transmis către server).

Exemplu

REZULTAT:

Buton de trimitere

Acest buton este pentru trimiterea formularului. În majoritatea browserelor, este aproape imposibil de distins de un buton. Ea în sine nu se transmite, ci servește doar pentru control.

Atribut onclick pentru buton TRIMITE practic nu este folosit, deoarece este mai bine să folosiți un handler de evenimente onsubmit, specificat în etichetă

. La urma urmei, pentru a transfera datele introduse în formular, în cazul general nu este deloc necesar să faceți clic pe butonul TRIMITE. Puteți apăsa pur și simplu o tastă de pe tastatură INTRODUCEîn timp ce se află în orice câmp de introducere a textului. Acest lucru va determina transferul de date.

Exemplu

REZULTAT:

Atribut valoare dă anumite avantaje atunci când utilizați mai mult de un buton de transfer de date. În acest caz, pe baza valorii variabilei primite, scriptul va putea determina cum să proceseze în continuare informațiile primite.

Exemplu

REZULTAT:

Atribut formnovalidate poate fi folosit pentru a preveni validarea valorilor formularului.

Exemplu

REZULTAT:

Butonul de resetare

Acesta este butonul pentru formularul clar. Când se face clic, toate elementele modificate revin la valoarea lor implicită. Este folosit destul de rar. Cu toate acestea, în unele cazuri poate fi destul de util.

Sfat: Aveți grijă când alegeți o etichetă pentru buton RESET. Ceva de genul „Ștergeți”, „Începeți de la capăt”, „Ștergeți intrarea”, etc. ar fi destul de clar (și, cel mai important, intuitiv chiar și pentru manechinele). În general, este necesar ca utilizatorul să nu aibă nici măcar o umbră de îndoială cu privire la scopul acestei chei.

Exemplu

câmp de introducere TEXT

Câmpul de introducere a textului este cel mai frecvent utilizat câmp de introducere în formulare. Mai mult decât atât, poate fi considerat pe bună dreptate principalul și elementul cel mai important forme Acest tip este folosit de etichetă implicit, se poate omite afișarea unui câmp de text. Cu toate acestea, dacă este nevoie să stilați selectorul intrare, apoi atributul tip="text" nu poate fi ratată.
Numele câmpului specificat de atribut Nume, este întotdeauna necesar, deoarece pe baza acestui parametru, browserul transmite perechea nume=valoare scriptului.

Exemplu

REZULTAT:

Textul „Ivanov” este plasat în câmpul creat ca valoare inițială. Dacă utilizatorul nu face modificări sau dă clic pe buton, valoarea Ivanov va fi trimisă în script ca numele de familie al utilizatorului.

Câmpul de introducere a numărului NUMBER

Câmpul este destinat introducerii numerelor. Când este introdusă, partea fracționară poate fi separată fie printr-un punct (2,5) fie printr-o virgulă (2,5). Dacă utilizatorul introduce litere, formularul nu va fi trimis la server.

Exemplu

REZULTAT:

Puteți seta minimul valoare maximă pasul de schimbare a câmpurilor și a numărului. Valoarea pasului poate fi fie pozitivă, fie negativă, dar trebuie să fie mai mare decât 0. Dacă numărul introdus în câmp nu îndeplinește restricțiile specificate, atunci trimiterea către server nu va avea loc.

Exemplu

REZULTAT:

Pentru a specifica orice pas, utilizați pas="oricare".

Exemplu

REZULTAT:

Camp număr este afișat diferit: unele browsere afișează întotdeauna săgeți, altele doar atunci când treceți cu mouse-ul sau primiți focalizarea.

Parola

Câmp ascuns HIDDEN

Acesta este un tip special (ascuns). câmp de text. Dacă un script procesează mai multe formulare diferite, puteți specifica un identificator într-un câmp ascuns pe fiecare formular, care vă va permite să identificați cu ce formular aveți de-a face.

Exemplu

...Alte elemente ale formei....

...Alte elemente de formă...

Browserul nu afișează câmpul ascuns, deși poate fi descoperit dacă puneți browserul în modul de vizualizare a fișierelor HTML și analizați textul paginii Web. Câmpurile ascunse sunt utile atunci când doriți să furnizați informații care sunt necesare pentru un script, dar nu doriți ca utilizatorul să le poată schimba. Cu toate acestea, rețineți că un utilizator experimentat ar putea salva formularul într-un fișier, îl poate edita și apoi trimite formularul modificat la server. Prin urmare, nu ar trebui să vă bazați câmpuri ascunse pentru a crea orice fel de protecție.

Exemplu

Scriptul va primi o variabilă numită FormVersion, căruia i se va atribui valoarea 1.2. Aceste informații pot fi folosite pentru a determina modul de procesare a restului informațiilor primite din formular. Dacă utilizatorul modifică această valoare, programul de script se poate comporta în moduri neașteptate.

Câmp de introducere a adresei de e-mail

Pentru a introduce mai multe adrese, puteți adăuga un atribut multiplu, cu o virgulă (,) folosită pentru a separa adresele

Exemplu

E-mail:

Subiectul anterior a analizat evenimentele care apar atunci când sunt apăsate tastele. În acest subiect ne vom uita la alte evenimente de formă. Inclusiv trimiterea formularului către server.

Element în focalizare

Când un element de formular are focalizare, evenimentul de focalizare este declanșat, iar când elementul iese din focalizare, evenimentul de estompare este declanșat. Să creăm un câmp de intrare și să trimitem text în consolă atunci când primește focalizarea și când își pierde focalizarea:

Cod HTML:

Evenimentul de estompare este uneori folosit pentru a verifica valoarea introdusă de utilizator într-un câmp de introducere.

Nu are rost să folosiți aceste evenimente pentru a schimba stilul unui element. Există o pseudo-clasă numită focus în CSS în acest scop.

Introducerea unei valori

eveniment de intrare Apare atunci când utilizatorul introduce text într-un câmp de introducere. Se declanșează atunci când fiecare caracter este adăugat sau eliminat, precum și atunci când textul este copiat în câmpul de introducere. În unele browsere, acest lucru funcționează neobișnuit: de fiecare dată când este introdus un caracter, este generat un eveniment de estompare, apoi este executat gestionarea evenimentelor de intrare și apoi evenimentul de focalizare este ridicat. Dacă nu există gestionatori de evenimente de focalizare și estompare, atunci nu există nicio problemă. Dar dacă sunt, atunci se vor declanșa de fiecare dată când se adaugă un simbol.

Să adăugăm o altă etichetă pe pagină și afișați valoarea acesteia când introduceți text:

Cod HTML:

JavaScript:

12 13 14 15

var newv=document.getElementById("newvalue"); newv.onchange = function () ( console.log ("Valoarea a fost schimbata in: "+newv.value); );

Trimiterea unui formular

Evenimentul de trimitere se declanșează atunci când formularul este trimis la server. Este folosit pentru a valida datele pe care utilizatorul le-a introdus în formular. Handler-ul verifică valorile elementelor formularului, iar dacă vreo valoare este introdusă incorect, formularul este anulat. Aceasta afișează de obicei un mesaj care indică ceea ce trebuie corectat.

Plasați etichetele create la formular și adăugați un buton de trimitere:

Cod HTML:

Dacă formularul este completat corect, adică toate câmpurile conțin cel puțin două caractere, atunci browserul va încerca să lanseze fișierul specificat în atribut de acțiune, iar o eroare va apărea deoarece nu există un astfel de fișier. Dar nu există niciun risc în asta, așa că nu trebuie să vă fie frică să testați scenariul. Dacă într-unul dintre câmpuri sunt introduse mai puțin de două caractere, va apărea un mesaj și trimiterea va fi anulată. Dacă există o mulțime de cecuri, atunci puteți afișa un mesaj diferit pentru fiecare cec și puteți anula trimiterea formularului.