Kā izveidot vienkāršu tālruņa numuru atlasītāju
Tālruņa numuri, bez nosaukumiem un e-pasta ziņojumiem, ir visbiežāk izmantotā kontaktinformācija tiešsaistē. Tālruņa numuru lauki parasti ir veidoti tā, lai lietotājiem būtu jāievada skaitļi, izmantojot to tastatūras. Šī metode bieži izraisa neprecīzu datu ievadi.
Uz samazināt lietotāju ievades kļūdas un uzlabojiet vietnes lietotāja pieredzi, varat izveidot a GUI kas ļauj lietotājiem ātri ievadīt savu tālruņa numuru tādā veidā, kas ir līdzīgs datumu atlasītājiem.
Šajā apmācībā redzēsiet, kā pievienot ievades laukam vienkāršu tālruņa numuru atlasītāju. Mēs izmantosim HTML5, CSS3 un JavaScript, lai nokļūtu GUI, kuru varat redzēt un pārbaudīt tālāk. Mēs arī izmantosim regulāras izteiksmes, lai pārliecinātos, ka lietotāji patiešām ievada derīgu tālruņa numuru.
1. Izveidojiet tālruņa numura lauku
Pirmkārt, izveidot ievades lauku ar labās puses izsaukuma ikonu, kas atvērs klikšķa ekrānu. Izsaukuma ikona izskatās kā 9 melnās kastes, kas sakārtotas 3 līdz 3, ir līdzīgas tam, ko redzat parastajā tālrunī.
Es izmantoju tel pareiza HTML5 semantikas ievades veids, bet jūs varat izmantot arī tekstu ievades veids, ja vēlaties.
2. Izveidojiet Dial Screen
The skalas ekrāns ir skaitļu režģis no 0 līdz 9 plus dažas īpašas rakstzīmes. To var izdarīt ar vai nu HTML Šeit es jums parādīšu, kā izveidot skārienekrāna tabulu JavaScript. Protams, jūs varat pievienot tabulu tieši HTML avota kodā, ja vēlaties, ka tā to dara. Pirmkārt, izveidojiet jaunu Pievienot a Tie divi Pēdējā rinda ir atšķirīga, jo tā sastāv no divas īpašas rakstzīmes, Lai izveidotu pēdējo rindu uz skalas ekrānu, pievienojiet šādu The Dialoglodziņš tagad ir pabeigts, pievienot to Lai padarītu to pievilcīgāku, veidojiet skalas ekrānu ar CSS. Jums nav obligāti jāsakrīt ar manu stilu, bet neaizmirstiet pievienot Vispirms pievienojiet Tad pievienojiet klikšķa notikumu apstrādātāju zvanīšanas ikonai ar JavaScript uz pārslēgt redzamību ekrānā. Lai to izdarītu, jums jāizmanto iepriekšminētie The Pievienojiet pielāgoto funkciju ievada ciparus tālruņa numura laukā uz skalas ekrāna šūnu klikšķa. The Tagad jums ir darba izvēles ekrāns ievadīt tālruņa numura lauku. Lai saglabātu atbilstību CSS, mainiet to ciparu fona krāsu Pievienot a vienkārša regex validācija lai apstiprinātu tālruņa numuru, kamēr lietotājs ievada ciparus ievades laukā. Saskaņā ar apstiprināšanas noteikumiem, ko izmantoju, tālruņa numurs var sākties tikai ar ciparu vai Jūs varat redzēt manu regulāras izteiksmes vizualizāciju zemāk redzamajā ekrānsaudzē, kas izveidota ar lietotni Debuggex. Varat arī apstiprināt tālruņa numuru atbilstoši jūsu valsts vai reģiona tālruņa numura formātam. Izveidojiet jaunu regulārā izteiksmes objektu un saglabājiet to Kad ievade netiek apstiprināta, ES esmu pievienojot sarkanu apmali ievades laukam, kad ievade ir nederīga, bet jūs varat informēt lietotāju citos veidos, piemēram, ar kļūdas ziņojumiem. The Ņemiet vērā, ka es pievienoju arī papildu validācija maksimālo rakstzīmju (nevar būt lielāks par 15), izmantojot Jūsu tālruņa numuru atlasītājs tagad ir gatavs, pārbaudiet pēdējo demonstrāciju. vai JavaScript.
'tabula' elementu DOM izmantojot createElement () metodi. Arī to “izsaukt” identifikators. / * Izveidot iezvanes ekrānu * / var dial = document.createElement ('tabula'); dial.id = 'dial'; par cilpa lai ievietotu četrus zvanu tabulas rindas. Tad katrai rindai, vadīt citu par cilpa lai pievienotu trīs šūnas vienā rindā. Atzīmējiet katru šūnu Ar 'dialDigit' klasē. par (var rowNum = 0; rindaNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) var cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
par iepriekš norādītās cilpas aprēķina ciparus, kas nonāk skalas tabulas šūnās - cell.textContent īpašums - šādā veidā: (colNum + 1) + (rowNum * 3) / * pirmā rinda * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + 0 * 3) = 3 / * otrā rinda * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * utt. * /
- un + kas tiek izmantoti tālruņa numuru formātos, lai identificētu reģionālos kodus, un ciparu 0.ja paziņojums iekšējam par cilpa. par (var rowNum = 0; rindaNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) /* if last row */ if (rowNum === 3) cell = row.insertCell(colNum); cell.textContent = '-'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '0'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '+'; cell.className = 'dialDigit'; break; cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
#dialWrapper HTML konteiners, ko izveidojāt 1. darbībā, izmantojot divas DOM metodes:querySelector () metode atlasiet konteinerupievienojietChild () metode pievienojiet skalas ekrānu - notika skalas mainīgais - uz trauku document.querySelector ('# dialWrapper'). appendChild (zvans); 
3. Stils Dial Screen
lietotāja izvēle: nav; īpašums #dial konteiners lai lietotājs noklikšķina uz cipariem, tekstu kursors nevarēs izvēlēties. #dial platums: 200px; augstums: 200px; robežu sabrukums: sabrukums; teksta saskaņošana: centrs; pozīcija: relatīvais; -ms-user-select: nav; -webkit-user-select: nav; -moz-user-select: nav; lietotāja izvēle: nav; krāsa: # 000; kastes ēna: 0 0 6px # 999; .dialDigit border: 1px solid #fff; kursors: rādītājs; fona krāsa: rgba (255,228,142, .7);
4. Parādiet Dial Screen par klikšķi
redzamība: slēpta; stila noteikums #dial iepriekš minētajā CSS uz slēpt skalas ekrānu pēc noklusējuma. tas tiks parādīts tikai tad, kad lietotājs noklikšķinās uz ikonas.querySelector () un addEventListener () metodes. Pēdējais pievieno klikšķa notikumu uz izsaukšanas ikonu un izsauc pasūtījumu toggleDial () funkciju.toggleDial () funkciju mainās redzamība no slēdža ekrāna no paslēptas uz redzamu un atpakaļ. document.querySelector ('# dialIcon'). addEventListener ('klikšķi', toggleDial); funkcija toggleDial () dial.style.visibility = dial.style.visibility === 'paslēpta' || dial.style.visibility === "?" redzams ":" slēpts "; 5. Pievienojiet funkcionalitāti
dialNumber () funkciju pievieno ciparus pa vienam uz textContent ievades lauka īpašība, kas atzīmēta ar #phoneNo identifikators. phoneNo = document.querySelector ('# phoneNo'); funkcija dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); par (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); : lidināties un : aktīvs (kad lietotājs noklikšķina uz tā). .dialDigit: hover fona krāsa: rgb (255,228,142); .dialDigit: aktīvs fona krāsa: # FF6478;
6. Pievienot regulāras izteiksmes validāciju
+ rakstzīmi un pieņemiet - pēc tam.
modeli mainīgais. Izveidojiet arī pasūtījumu apstiprināt () funkcija, kas pārbauda, vai ievadītais tālruņa numurs atbilst regulārajai izteiksmei, un ja tas ir vismaz 8 rakstzīmes.apstiprināt () funkcijai dot atsauksmes lietotājam. modelis = jauns RegExp ("^ (d 1,2)? (d + * * + +) * $"); funkcija validēt (txt) // vismaz 8 rakstzīmes derīgam tālrunim Nr. ja (! pattern.test (txt) || txt.length) < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Veiciet apstiprināšanu
apstiprināt () funkcijas jāizsauc lai veiktu validāciju. Sauciet to no dialNumber () funkcija, ko izveidojāt 5. darbībā, lai apstiprinātu phoneNo mainīgais.ja paziņojums, apgalvojums. funkcija dialNumber () var val = phoneNo.value + this.textContent; // maksimāli pieļaujamās rakstzīmes, 15, ja (val.length> 15) atgriežas false; apstiprināt (val); phoneNo.value = val;
