Jak vytvořit jednoduchý výběr telefonního čísla
Telefonní čísla, Kromě jmen a e-mailů jsou nejčastěji používané kontaktní informace v online formulářích. Pole telefonního čísla jsou obvykle navržena způsobem, který vyžaduje, aby uživatelé zadávali čísla pomocí klávesnice. Tato metoda často vede k nepřesnému zadání dat.
Na snížit vstupní chyby uživatele a zlepšit uživatelský komfort vašich stránek, můžete vytvořit GUI který umožňuje uživatelům rychle zadávat své telefonní číslo způsobem, který je obdobný jako při výběru data.
V tomto tutoriálu uvidíte, jak do vstupního pole přidejte jednoduchý výběr telefonního čísla. Použijeme HTML5, CSS3 a JavaScript, abychom se dostali do grafického uživatelského rozhraní. Používáme také regulární výrazy, abychom zajistili, že uživatelé skutečně zadají platné telefonní číslo.
1. Vytvořte pole Telefonní číslo
První, vytvořit vstupní pole s ikonou vytáčení vpravo, která po kliknutí otevře obrazovku vytáčení. Ikona vytáčení vypadá jako 9 černých krabic, uspořádaných 3 po 3, musí mít rád to, co vidíte na běžném telefonu.
Používám tel vstup pro správnou sémantiku HTML5, ale můžete použít i text Pokud chcete, zadejte typ vstupu.
2. Vytvořte obrazovku Dial
vytočit obrazovku je mřížka čísel 0 až 9 plus některé speciální znaky. Může být vyrobeno buď HTML Zde vám ukážu, jak vytvořit tabulku číselníku v jazyce JavaScript. Tuto tabulku můžete samozřejmě přidat přímo do zdrojového kódu HTML, pokud to dáváte přednost. Nejprve vytvořte nový Přidat Dva Poslední řádek je jiný, jak se skládá dvou speciálních znaků, Chcete-li vytvořit poslední řádek na obrazovce vytáčení, přidejte následující obrazovka volby je nyní dokončena, přidejte ho do Aby bylo atraktivnější, styl obrazovky vytáčení s CSS. Nemusíte se nutně držet mého stylu, ale nezapomeňte přidat Nejprve přidejte Potom přidejte obslužnou rutinu události klepnutí do ikony vytáčení s JavaScriptem na přepnout viditelnost obrazovky. K tomu je třeba použít výše uvedené Přidat vlastní funkci, která zadává číslice do pole telefonního čísla na cvaknutí buněk obrazovky. Teď máte pracovní obrazovka do pole pro zadání telefonního čísla. Chcete-li držet krok s CSS, změňte barvu pozadí číslic v jejich Přidat jednoduchá validace regexu pro ověření telefonního čísla, zatímco uživatel zadá číslice do vstupního pole. Podle platných validačních pravidel může telefonní číslo začínat pouze číslicemi nebo čísly Vizualizaci mého regulárního výrazu můžete vidět na obrazovce níže vytvořené pomocí aplikace Debuggex. Telefonní číslo můžete také ověřit podle formátu telefonního čísla vaší země nebo oblasti. Vytvořte nový objekt regulárního výrazu a uložte jej do Když vstup není ověřen, Já jsem přidání červeného ohraničení pokud je vstup neplatný, můžete uživatele informovat jinými způsoby, například chybovými zprávami. Všimněte si, že jsem také přidal dodatečné ověření pro maximální počet znaků (nesmí být větší než 15) pomocí Tvůj telefonní číslo je nyní připraven, podívejte se na poslední demo níže. nebo JavaScript.
'stůl' prvek v DOM pomocí createElement () metoda. Dej to 'vytáčení' identifikátor. / * Vytvořit obrazovku vytáčení * / var dial = document.createElement ('tabulka'); dial.id = 'vytáčení'; pro smyčka pro vložení čtyř řádků číselníku. Pak pro každý řádek, spustit další pro smyčka za účelem přidání tří buněk na řádek. Označte každou buňku s 'dialDigit' třída. pro (var rowNum = 0; rowNum < 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();
pro smyčky nad vypočítat číslice, které jdou do buněk tabulky čísel - hodnoty cell.textContent vlastnictví - následujícím způsobem: (colNum + 1) + (rowNum * 3) / * první řádek * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * druhá řada * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * atd. * /
- a + které se používají ve formátech telefonních čísel k identifikaci regionálních kódů a číslice 0.-li prohlášení vnitřní pro smyčka. pro (var rowNum = 0; rowNum < 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 Kontejner HTML, který jste vytvořili v kroku 1 pomocí dvě metody DOM:querySelector () metodu vyberte kontejnerappendChild () metodu připojte obrazovku vytáčení - konané v ciferník proměnná - do kontejneru document.querySelector ('# dialWrapper'). appendChild (vytáčení); 
3. Styl obrazovky Dial
user-select: none; vlastnictví #dial kontejner tak, že zatímco uživatel klikne na číslice, text nebude vybrán kurzorem. #dial width: 200px; výška: 200px; hraniční kolaps: kolaps; zarovnání textu: střed; poloha: relativní; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; barva: # 000; box-shadow: 0 0 6px # 999; .dialDigit border: 1px solid #fff; kurzor: ukazatel; barva pozadí: rgba (255,228,142, .7);
4. Na obrazovce klepněte na položku Obrazovka vytáčení
viditelnost: skrytá; styl pravidlo #dial ve výše uvedených CSS na skrýt obrazovku vytáčení ve výchozím stavu. Zobrazí se pouze tehdy, když uživatel klikne na ikonu vytáčení.querySelector () a addEventListener () metody. Dopis připojí událost click na ikonu vytáčení a volání vlastní toggleDial () funkce.toggleDial () funkce změní viditelnost obrazovky vytáčení ze skrytého na viditelný a zpět. document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); function toggleDial () dial.style.visibility = dial.style.visibility === 'skryté' || dial.style.visibility === "? 'Viditelné': 'skryté'; 5. Přidejte funkci
vytočit číslo() funkce postupně přidává číslice na textObsah vlastnost vstupního pole označeného #telefonní číslo identifikátor. phoneNo = document.querySelector ('# phoneNo'); funkce dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); pro (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); :vznášet se a :aktivní (když na něj uživatel klikne) uvádí. .dialDigit: hover pozadí-barva: rgb (255,228,142); .dialDigit: active background-color: # FF6478;
6. Přidání ověření regulárního výrazu
+ a přijmout - poté.
vzor proměnná. Vytvořte také vlastní ověřit() funkce, která kontroluje, zda zadané telefonní číslo splňuje regulární výraz, a jestli je to nejméně 8 znaků.ověřit() funkce dát zpětnou vazbu uživatele. pattern = new RegExp ("^ (+ d 1,2)? (d + - * d +) * $"); funkce validovat (txt) // nejméně 8 znaků pro platné telefonní číslo. if (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Proveďte ověření
ověřit() funkce je třeba zavolat k provedení ověření. Zavolej to z vytočit číslo() funkce, kterou jste vytvořili v kroku 5 za účelem ověření hodnoty telefonní číslo proměnná.-li prohlášení. funkce dialNumber () var val = phoneNo.value + this.textContent; // maximální povolený počet znaků, 15 (val.length> 15) return false; validovat (val); phoneNo.value = val;
