unos događaja. Forma i kontrolni događaji

Ovo je test. Provjeri, provjeri, provjeri.

. Imajte na umu da koristi svojstvo this.parentNode. Ovo označava da će cijeli element kontejnera biti premješten.

Događaji unosa teksta

Pretraživači podržavaju tri starija događaja unosa sa tastature. Događaji skidanja i pritiskanja tipke su događaji niskog nivoa i obuhvaćeni su sljedeći odjeljak. Međutim, događaj pritiskom na taster je visokog nivoa, što ukazuje da je unesen znak za štampanje.

Nacrt specifikacije DOM nivoa 3 događaja definiše generalizovaniji događaj textinput Generisano kao odgovor na unos teksta, bez obzira na to kako je unet.

Sa predloženim događajem unosa teksta i trenutno implementiranim događajem textInput, prosljeđuje se jednostavan objekt događaja koji ima svojstvo podataka koji sadrži uneseni tekst. (Drugo svojstvo predloženo od strane specifikacije, inputMethod, trebalo bi da definiše izvor unosa, ali još nije implementirano.) Za unos sa tastature, svojstvo podataka će obično sadržati jedan znak, ali za unos iz drugih izvora, može sadržati više karaktera.

Objekt događaja proslijeđen s događajem pritiska na tipku je složeniji. Događaj pritiska tipke predstavlja unos jednog karaktera. Ovaj znak je sadržan u objektu događaja kao numerička vrijednost Unicode kodne točke, a da biste ga pretvorili u string, morate koristiti metodu String.fromCharCode(). U većini pretraživača, kodna točka unesenog znaka je pohranjena u svojstvu keyCode objekt događaja. Međutim, iz istorijskih razloga, Firefox umjesto toga koristi svojstvo charCode.

U većini pretraživača, događaj pritiska na taster se pokreće samo kada se unese znak. Međutim, u Firefoxu, događaj pritiska na tipku se pokreće i za znakove koji se ne ispisuju. Da biste razlikovali ova dva slučaja (i zanemarili znakove koji se ne mogu ispisati), možete provjeriti postoji li svojstvo charCode objekta događaja i sadrži li vrijednost 0.

Događaji unosa teksta, unosa teksta i pritiska na taster mogu se otkazati da bi se sprečio unos karaktera. To jest, ovi događaji se mogu koristiti za filtriranje unosa. Na primjer, možete spriječiti unos abecednih znakova u polje koje prihvaća numeričke podatke.

Primjer ispod pokazuje modul u JavaScript, koji implementira ovu vrstu filtriranja. Traži elemente s dodatnim (nestandardnim) atributom data-allowed-chars. Registrira obradu teksta unosom teksta, unosom teksta i pritiskom na tipku za sve pronađene elemente i ograničava unos na znakove regularnog izraza specificirane u atributu data-allowed-chars:

/* Filtriraj unos za elemente Ovaj modul pronalazi sve elemente u dokumentu koji ima atribut "data-allowed-chars". Registruje rukovaoce događajima za događaje pritiska na tipku, unos teksta i textInput za ove elemente kako bi se ograničio skup znakova dozvoljenih za unos kako bi se omogućilo unošenje samo znakova navedenih u atributu. Ako element također ima atribut "data-messageid", vrijednost ovog atributa se tumači kao id drugog elementa dokumenta. Ako korisnik unese nevažeći znak, element sa navedenim ID-om postaje vidljiv. Ako korisnik unese ispravan znak, element poruke je skriven. Ovaj element sa porukom ima za cilj da pruži objašnjenje zašto je korisnikov unos odbijen. Njegov dizajn mora biti implementiran pomoću CSS-a tako da u početku bude nevidljiv. */ whenReady(function () ( // Pozvaće ovu funkciju kada se dokument učita // Pronađi sve elemente var inputelts = document.getElementsByTagName("input"); // Zaobiđite ih u 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 || // Управляющий ASCII znak e.charCode == 0 || // Funkcijska tipka (u Firefoxu) e.ctrlKey || e.altKey) // Modifikatorski taster za držanje return; // Ne filtriraj ovaj događaj // Pretvori kod karaktera u string var text = String.fromCharCode(code); ) // Pronađite informacije koje su nam potrebne u ovom elementu input var allowed = target.getAttribute("data-allowed-chars"); // Važeći znakovi var messageid = target.getAttribute("data-messageid"); // ID poruke if (messageid) // Ako je id specificiran, get element var messageElement = document.getElementById(messageid); // Prolazi kroz znakove u ulaznom tekstu for(var i = 0; i< text.length; i++) { var c = text.charAt(i); allowed = new RegExp(allowed, "i"); // Создаем regularni izraz if (c.search(allowed) == -1) ( // Nevažeći znak? // Prikaži element poruke ako je specificirano if (messageElement) messageElement.style.visibility="visible"; // Nadjačati zadane radnje da spriječi umetanje teksta if (e.preventDefault) e.preventDefault(); if (e.returnValue) e.returnValue = false; return false; ) ) // Ako su svi znakovi bili valjani, sakriti element // sa porukom ako je specificirano if (messageElement ) messageElement.style.visibility = "hidden"; ) ));

Ispod je uzorak HTML markup koristeći ovaj modul:

Molimo popunite formular.

Kontakt informacije

Ime Samo slova
Telefon Samo brojevi
Email Neispravan email

Slika ispod prikazuje upotrebu ovog obrasca. Ovdje sam nakon unosa imena ubacio broj koji je automatski blokiran i pojavila se poruka upozorenja:

Događaji pritiska tipke i unosa teksta pokreću se neposredno prije nego što je novi tekst zapravo umetnut u element dokumenta koji ima fokus za unos, tako da rukovaoci za ove događaje mogu spriječiti da se tekst zalijepi tako što će otkazati događaj.

Pretraživači također implementiraju događaj unos, koji se pokreće nakon što je tekst umetnut u element. Ovaj događaj se ne može otkazati i njegov odgovarajući objekt događaja ne sadrži informacije o umetnutom tekstu - on jednostavno obavještava da se sadržaj teksta elementa promijenio. Ako, na primjer, želite osigurati da se unose samo velika slova, možete definirati rukovalac ulaznim događajima kao što je prikazano u nastavku:

Događaj unosa je standardiziran u HTML5 specifikaciji i svi ga podržavaju moderni pretraživači osim IE. Sličan efekat se može postići u IE otkrivanjem promjene svojstva vrijednosti tekstualni element unos sa prilagođenim događajem promjena imovine.

Događaji na tastaturi

Događaji keydown i keyup aktivira se kada korisnik pritisne ili otpusti tipku na tastaturi. Generiraju se za modifikatorske tipke, funkcijske tipke i alfanumeričke tipke. Ako korisnik drži pritisnutu tipku dovoljno dugo da omogući automatsko ponavljanje, mnogi događaji skidanja tipke će se generirati prije nego što se dogodi taj događaj.

Objekt događaja koji odgovara ovim događajima ima svojstvo keyCode sa numeričkom vrijednošću koja specificira pritisnutu tipku. Za ključeve koji generiraju znakove za ispis, u opšti slučaj svojstvo keyCode sadrži Unicode kodnu točku koja odgovara osnovnom znaku prikazanom na ključu. Tasteri sa slovima uvijek generiraju vrijednosti koda ključa koje odgovaraju velikim znakovima, bez obzira na stanje tipke Shift, jer su to znakovi prikazani na tipkama.

Slično, numerički ključevi uvijek generiraju vrijednosti koda ključa koje odgovaraju numeričke znakove prikazano na tasterima, čak i ako držite pritisnuto Taster Shift da unesete znak interpunkcije. Za ključeve koji ne odgovaraju znakovima za ispis, svojstvo keyCode će imati neku drugu vrijednost. Ove vrijednosti svojstava keyCode nikada nisu standardizirane. Međutim, u različitim pretraživačima ne razlikuju se toliko da se prenosivost ne može osigurati.

Kao i objekti događaja miša, objekti događaja na tipkovnici imaju svojstva altKey, ctrlKey, metaKey i shiftKey, koji se procjenjuju na istinito ako je odgovarajući modifikatorski ključ bio pritisnut kada se događaj dogodio.

Događaji keydown i keyup, kao i svojstvo keyCode, postoje više od deset godina, ali nikada nisu bili standardizirani. DOM Level 3 Events Draft standardizira tipove događaja keydown i keyup, ali ne standardizira svojstvo keyCode. Umjesto toga, definira novo svojstvo ključa, koje treba sadržavati ime ključa kao string. Ako ključ odgovara znaku za ispis, svojstvo ključa mora sadržavati taj znak za ispis. Za funkcijske tipke, svojstvo ključa mora sadržavati vrijednosti kao što su F2, Home ili Left.

U vrijeme pisanja ovog teksta, svojstvo ključa, kako je definirano standardom DOM Level 3 Events, još nije implementirano ni u jednom pretraživaču. Međutim, pretraživači zasnovani na Webkit-u, Safari i Chrome definiraju svojstvo u ovim objektima događaja keyIdentifier. Za funkcijske tipke, poput svojstva ključa, svojstvo keyIdentifier ne sadrži broj, već niz s imenom ključa, kao što je Shift ili Enter. Za ključeve koji odgovaraju znakovima koji se mogu ispisati, ovo svojstvo sadrži manje prilagođeni prikaz stringova Unicode kodne točke karaktera. Na primjer, ključ A odgovara vrijednosti U+0041.

Sljedeći primjer definira klasu Keymap koja preslikava identifikatore kombinacije tipki kao što su PageUp, Alt_Z i ctrl+alt+shift+F5 u JavaScript funkcije koje se pozivaju kao odgovor na te kombinacije koje se pritisnu. Definicije povezivanja ključeva se prosljeđuju Keymap() konstruktoru u obliku JavaScript objekat, čija imena svojstava odgovaraju identifikatorima kombinacije ključeva i čije vrijednosti svojstva sadrže reference na funkcije rukovatelja. Vezivanja se dodaju i uklanjaju pomoću metoda bind() i unbind().

Instalira Keymap objekat na HTML element (obično objekt Document) koristeći metodu install(). Kada je Keymap objekat postavljen, na ovom elementu se registruje rukovalac za događaj keydown. Svaki put kada se pritisne tipka, rukovatelj provjerava funkciju koja odgovara toj kombinaciji. Ako funkcija postoji, poziva se.

Obrađivač događaja keydown koristi svojstvo ključa DOM Level 3 Events, ako ono postoji. U suprotnom, pokušava da koristi svojstvo Webkit keyIdentifier. I kao rezervni, rukovalac koristi nestandardno svojstvo keyCode:

// Funkcija konstruktorske funkcije Keymap(bindings) ( this.map = (); // Definiraj identifikator mapiranja->handler if (bindings) ( // Kopiraj početnu mapu vezivanja u nju za(ime u vezama) this.bind(name , vezivanja); ) ) // Veže navedeni ID ključa za specificirana funkcija rukovalac Keymap.prototype.bind = function(key, func) ( this.map = func; ); // Uklanja vezivanje za navedeni ID ključa Keymap.prototype.unbind = function(key) ( delete this.map; ); // Postavlja ovaj Keymap objekt na specificirani HTML element Keymap.prototype.install = function(element) ( var keymap = this; // Definirajte funkcije rukovatelja događajima function handler(event) ( return keymap.dispatch(event, element); ) // Postavi if (element.addEventListener) element.addEventListener("keydown", handler, false); else if (element.attachEvent) element.attachEvent("onkeydown", handler); ); // Ova metoda delegira rukovanje događajima na tastaturi na osnovu veza Keymap.prototype.dispatch = function(event, element) ( // U početku ne postoje nazivi ključeva modifikatora ili naziv ključa var modifiers = ""; var keyname = null; / / Konstruirajte nizove modifikatora u kanonskom obliku od malih znakova // po abecedi if (event.altKey) modifikatori += "alt_"; if (event.ctrlKey) modifikatori += "ctrl_"; if (event .metaKey) modifikatori += "meta_" ; if (event.shiftKey) modifikatori += "shift_"; // Ime ključa je lako dobiti ako je implementirano DOM Level 3 // svojstvo ključa: if (event.key) keyname = event.key; // Vi može koristiti svojstvo keyIdentifier da dobije nazive funkcijskih ključeva u Safariju i Chromeu inače if(event.keyIdentifier && event.keyIdentifier.substring(0,2) !== "U+") keyname = event. keyIdentifier; // U suprotnom, vi može koristiti svojstvo keyCode // i prikazati kod > ime ispod else ke yname = Keymap.keyCodeToKeyName; // Ako se ime ključa ne može odrediti, jednostavno zanemarite događaj // i vratite se. if (!keyname) return; // Kanonski identifikator ključa sastoji se od imena modifikatora // i imena ključa u malim slovima var keyid = modifiers + keyname.toLowerCase(); // Provjerite postoji li veza za dati identifikator ključevi var handler = this.map; if (handler) ( // Ako je rukovalac za dati ključ, pozovite ga // Pozovite funkciju rukovatelja var retval = handler.call(element, event, keyid); // Ako je rukovatelj vratio false, otkažite zadane akcije // i prekidamo događaje koji se pojavljuju u obliku mjehurića if (retval === false) ( if (event.stopPropagation) event.stopPropagation(); // DOM else event.cancelBubble = istina; // IE model if (event.preventDefault) event.preventDefault(); // DOM else event.returnValue = false; // IE ) // Vraća vrijednost primljenu od obrađivača return retval; ) ); // Pomoćna funkcija za pretvaranje identifikatora ključa u kanonski oblik. // Moramo pretvoriti "meta" ID u "ctrl" da pretvorimo // Meta-C ID u "Command-C" na Mac računarima i "Ctrl-C" na svima ostalima. Keymap.normalize = function(keyid) ( keyid = keyid.toLowerCase(); // Mala slova var words = keyid.split(/\s+|[\-+_]/); // Izdvoj modifikatore var keyname = words .pop (); // ime ključa je posljednja riječ keyname = Keymap.aliases || ime ključa; // Je li to pseudonim?words.sort(); // Modifikatori sortiranja words.push(keyname); // Vrati normalizirano ime return words .join("_"); // Spojite sve zajedno ) Keymap.aliases = ( // Mapirajte poznate pseudonime ključeva u njihova // "zvanična" DOM ​​Level 3 imena i mapirajte šifre ključeva // na imena ispod. Ime i vrijednost moraju sadržavati samo mala slova "escape":"esc", "return":"enter", "delete":"del", "ctrl":"control", "space":"spacebar", " ins":"umetnuti"); // Staro svojstvo keyCode objekta događaja keydown nije standardizirano // Ali sljedeće vrijednosti mogu se uspješno koristiti u većini pretraživača i operativnih sistema. Keymap.keyCodeToKeyName = ( // Tipke sa riječima ili strelicama na njima 8:"Backspace", 9:"Tab", 13:"Enter", 16:"Shift", 17:"Control", 18:"Alt", 19:"Pauza", 20:"CapsLock", 27:"Esc", 32:"Razmaknica", 33:"PageUp", 34:"PageDown", 35:"Kraj", 36:"Početna", 37: "Lijevo", 38:"Gore", 39:"Desno", 40:"Dolje", 45:"Ubaci", 46:"Del", // Numeričke tipke na glavnoj tastaturi (ne na sekundarnoj) 48:"0",49:"1",50:"2",51:"3",52:"4",53:"5",54:" 6", 55:"7",56:"8",57:"9", // Tasteri sa slovima. Imajte na umu da nema razlike // između vrha i mala slova 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", // Brojčani tasteri su uključeni dodatna tastatura i tipke sa znakovima interpunkcije. // (Nije podržano u Operi.) 96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6" ,103:"7",104:"8", 105:"9",106:"Pomnoži", 107:"Dodaj", 109:"Oduzmi", 110:"Decimalno", 111:"Podijeli", / / Funkcijski tasteri 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", // Tasteri sa znakovima interpunkcije koji ne zahtijevaju da // držite pritisnut tipku Shift. // Crtica se ne može koristiti na prenosivi način: FF vraća // isti kod kao za ključ za oduzimanje 59:";", 61:"=", 186:";", 187:"=", // Firefox i Opera vraćaju 59.61 188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222: """);

Slijedi primjer korištenja Keymap objekta:

Window.onload = function() ( var keymap = new Keymap; // Kreirajte novi Keymap objekat keymap.bind("ctrl+a", // Ctrl+A kombinacija function(event, keyid) ("Pritisnuli ste: " + keyid) )); // Još jedno vezivanje Ctrl + Enter keymap.bind("ctrl+enter", function(event, keyid) ( alert("Pritisli ste: " + keyid) )); keymap.install(document. tijelo); // Postavljanje objekta Keymap za cijeli dokument );

Najčešće korištena oznaka u obrascima je . Nema završnu oznaku. Sve informacije koje pretraživač treba da obradi nalaze se direktno u oznaci i postavlja se korištenjem različitih atributa. Semantika uvelike varira ovisno o vrijednosti njegovog atributa tip.

Tag Attributes

type Glavni atribut koji specificira tip elementa. Ako atribut nije specificiran, tada se koristi zadana vrijednost. tekst.
Moguće vrijednosti:

Ne podržavaju svi pretraživači tipove dodane u HTML5.
Ako pretraživač ne podržava jedan od novih tipova, tada će pretpostaviti da je to . Kako organizirati podršku za starije pretraživače opisano je koristeći datum kao primjer.

Autocomplete="off" Onemogućava automatsko dovršavanje za dato polje. Vrlo korisno za polja za unos jednokratnih kodova, captcha itd. .setAttribute("autocomplete","off"); autofokus Automatski prijem fokus na učitavanje stranice. Vrijednost se može postaviti na tri načina: ... ... ... Primjer emulacije svojstva autofokusa za starije pretraživače. disabled Čini element nedostupnim. Nedostupne stavke se ne šalju na server. name Ime polja. Svako polje za unos koje kreirate mora imati svoje jedinstveno ime, inače skripta neće odrediti kojim poljima pripadaju rezultirajuće vrijednosti. Naravno, naziv polja za unos mora odgovarati imenu koje je za njega opisano u programu za obradu. value Podrazumevana vrijednost polja ili oznake na gumbu. size Veličina polja tipa. maxlength Ograničenje broja znakova koji se mogu unijeti u polje tipa . readonly="readonly" ili "" Sprečava izmenu elementa. obavezno Automatski provjerava da li je polje popunjeno.
Da biste istakli ispravno popunjeno obavezno polje, možete koristiti sljedeću stilsku konstrukciju: min Minimalna vrijednost broja u polju tipa broj. max Maksimalna vrijednost broja u polju tipa broj. korak Korak promjene broja u polju tipa broj. obrazac Obrazac polja za unos. Provjera ispravnosti unosa podataka. Uzorci predložaka za obrazac unosa html5 obrasca. placeholder Tekst nagoveštaja u polju obrasca, koji automatski nestaje kada polje dobije fokus.
Primjer podešavanja stila savjeta:

U IE i Firefoxu (do verzije 18) čuvar mjesta smatra se pseudo-klasom, au ostalom - pseudo-elementom.

REZULTAT:

Lista Lista opcija koje se mogu odabrati kada kucate u tekstualno polje.
Ova lista je u početku skrivena i postaje dostupna kada polje dobije fokus ili kada se unese tekst.

Tipovi INPUT elemenata

dugme

Dugme BUTTON namijenjen je onim slučajevima kada je potrebno izvršiti bilo koju skriptu. To jest, događaj je okačen na dugme Onclick i poziva se tražena funkcija. Atribut vrijednost postavlja natpis za dugme. Atribut onclick specificira JavaScript rukovalac koji se poziva kada se klikne na dugme. Atribut ime služi za JavaScript imenovanje dugmeta (ne prosleđuje se serveru).

Primjer

REZULTAT:

Dugme SUBMIT

Ovo dugme služi za podnošenje obrasca. U većini pretraživača izgleda gotovo da se ne razlikuje od dugmeta. Ona se sama po sebi ne prenosi, već služi samo za kontrolu.

Atribut onclick za dugme SUBMIT praktično se ne koristi, jer je bolje koristiti obrađivač događaja onsubmit, navedeno u oznaci

. Uostalom, da biste prenijeli podatke unesene u obrazac, u općenitom slučaju uopće nije potrebno kliknuti na dugme SUBMIT. Možete samo pritisnuti tipku na tastaturi ENTER, dok je u bilo kojem polju za unos teksta. Ovo će prenijeti podatke.

Primjer

REZULTAT:

Atribut vrijednost daje određene beneficije kada koristite više od jednog dugmeta za podatke. U tom slučaju, na osnovu vrijednosti primljene varijable, skripta će moći odrediti kako dalje obraditi primljene informacije.

Primjer

REZULTAT:

Atribut formnovalidate može se koristiti za sprječavanje validacije vrijednosti obrasca.

Primjer

REZULTAT:

RESET dugme

Ovo je dugme za brisanje obrasca. Kada se pritisne, svi izmijenjeni elementi se vraćaju na svoju zadanu vrijednost. Koristi se prilično rijetko. Međutim, u nekim slučajevima može biti vrlo korisno.

Savjet: Budite oprezni pri odabiru naljepnice s gumbima RESETOVATI. Prilično vizualno (i, što je najvažnije, intuitivno čak i za čajnik sa čajnicima) bilo bi nešto poput „Obriši“, „Počni ispočetka“, „Izbriši unos“ itd. Općenito, potrebno je da korisnik nema ni sjenku sumnje u svrhu ovog ključa.

Primjer

TEXT polje za unos

Polje za unos teksta najčešće se koristi u obrascima. Štoviše, s pravom se može smatrati glavnim i glavni element forme. Ovu vrstu koristi oznaka po defaultu, može se izostaviti da se prikaže tekstualno polje. Međutim, ako trebate stilizirati selektor unos, zatim atribut type="text" ne može se preskočiti.
Ime polja dato atributom ime, je uvijek obavezan, jer na osnovu ovog parametra, pretraživač skriptu prosljeđuje par ime=vrijednost.

Primjer

REZULTAT:

U generirano polje kao početna vrijednost stavlja se tekst Ivanov. Ako korisnik ne izvrši nikakve promjene ili klikne na dugme, tada će vrijednost Ivanov biti poslana skripti kao prezime korisnika.

NUMBER polje za unos

Polje je namijenjeno za unos brojeva. Razlomak prilikom unosa može se odvojiti i tačkom (2.5) i zarezom (2.5). Ako korisnik unese slova, obrazac neće biti poslat serveru.

Primjer

REZULTAT:

Možete postaviti minimum maksimalna vrijednost polja i korak promjene broja. Vrijednost koraka može biti pozitivna ili negativna, ali mora biti veća od 0. Ako broj upisan u polje ne zadovoljava navedena ograničenja, slanje na server se neće dogoditi.

Primjer

REZULTAT:

Za postavljanje bilo kojeg koraka koristite step="bilo koji".

Primjer

REZULTAT:

Polje broj se prikazuje drugačije: neki pretraživači uvijek prikazuju strelice, neki ih prikazuju samo kada lebde ili primaju fokus.

Lozinka

Skriveno polje HIDDEN

Ovo je posebna (skrivena) vrsta tekstualno polje. Ako ista skripta obrađuje nekoliko različitih obrazaca, možete odrediti ID u skrivenom polju svakog obrasca kako biste identificirali s kojim obrascem imate posla.

Primjer

...Više elemenata forme....

...Više elemenata forme...

Pretraživač ne prikazuje skriveno polje, iako se može pronaći postavljanjem pretraživača na HTML prikaz i raščlanjivanjem teksta web stranice. Skrivena polja su korisna kada želite da pružite informacije koje su potrebne za skriptu, ali ne želite da korisnik može da ih promeni. Međutim, imajte na umu da pametan korisnik može spremiti vaš obrazac u datoteku, urediti ga, a zatim poslati izmijenjeni obrazac na server. Stoga se ne oslanjajte na skrivena polja u cilju pružanja nekog oblika zaštite.

Primjer

Skripta će dobiti varijablu pod nazivom FormVersion, kojoj će biti dodijeljena vrijednost 1.2. Ove informacije se mogu koristiti za određivanje načina na koji se obrađuju druge informacije primljene iz obrasca. Ako korisnik promijeni ovu vrijednost, program skripte može se ponašati neočekivano.

Polje za unos e-pošte

Da unesete više adresa, možete dodati atribut višestruko, sa zarezom (,) koji se koristi za odvajanje adresa

Primjer

Email:

U prošloj temi razmatrani su događaji koji se dešavaju kada se pritisnu tipke. U ovoj temi ćemo se osvrnuti na druge događaje. Uključujući podnošenje obrasca na server.

Element u fokusu

Kada element obrasca dođe u fokus, aktivira se događaj fokusa, a kada element obrasca izađe van fokusa, aktivira se događaj zamućenja. Kreirajmo polje za unos i ispišimo tekst na konzoli kada dobije fokus i kada napusti fokus:

HTML kod:

Događaj zamućenja se ponekad koristi za provjeru vrijednosti koju je korisnik unio u polje za unos.

Nema smisla koristiti ove događaje za promjenu stila elementa. Za ovo postoji fokusna pseudo-klasa u CSS-u.

Unos vrijednosti

ulazni događaj javlja se kada korisnik unese tekst u polje za unos. Aktivira se kada se svaki znak doda ili ukloni i kada se tekst kopira u polje za unos. U nekim pretraživačima ovo funkcioniše na neobičan način: svaki put kada se unese znak, pokreće se događaj zamućenja, nakon toga se izvršava rukovalac ulaznim događajima, a zatim se pokreće događaj fokusa. Ako ne postoje obrađivači događaja fokusa i zamućenja, onda to nije problem. Ali ako jesu, onda će raditi svaki put kada se doda lik.

Dodajte još jednu oznaku na stranicu i prikazati njegovu vrijednost prilikom unosa teksta:

HTML kod:

JavaScript:

12 13 14 15

var newv=document.getElementById("newvalue"); newv.onchange = function () ( console.log("Vrijednost promijenjena u: "+newv.value); );

Podnošenje obrasca

Događaj slanja se pokreće kada se obrazac pošalje na server. Koristi se za provjeru valjanosti podataka koje je korisnik unio u obrazac. U rukovatelju se provjeravaju vrijednosti elemenata obrasca, a ako se bilo koja vrijednost unese pogrešno, obrazac se poništava. Ovo obično rezultira porukom koja pokazuje šta treba popraviti.

Postavite kreirane oznake u obrazac i dodajte dugme za slanje obrasca:

HTML kod:

Ako je obrazac ispravno popunjen, odnosno ako u svim poljima postoje najmanje dva znaka, pretraživač će pokušati pokrenuti datoteku navedenu u atribut akcije, i doći će do greške jer ne postoji takav fajl. Ali u tome nema rizika, tako da se ne treba bojati provjeriti rad skripte. Ako se u jedno od polja unese manje od dva znaka, pojavit će se poruka i slanje će biti poništeno. Ako ima puno čekova, onda za svaku provjeru možete prikazati vlastitu poruku i otkazati podnošenje obrasca.