Како створити једноставан телефонски број Пицкер
Бројеви телефона, осим имена и е-порука, најчешће се користе контактне информације у онлине обрасцима. Поља телефонског броја су обично дизајнирана тако да корисници морају да уносе бројеве у тастатури. Овај метод често резултира нетачним уносом података.
До смањите грешке при уносу корисника и побољшајте корисничко искуство свог сајта, можете да креирате ГУИ који омогућава корисницима да брзо унесу свој телефонски број, на начин који је сличан онима који сакупљају податке.
У овом упутству видећете како додајте једноставан избор броја телефона у поље за унос. Користићемо ХТМЛ5, ЦСС3 и ЈаваСцрипт да бисмо дошли до графичког корисничког интерфејса који можете видети и тестирати у наставку. Користићемо и регуларне изразе како бисмо били сигурни да корисници заиста уносе важећи број телефона.
1. Креирајте поље Пхоне Нумбер
Први, креирајте поље за унос са иконом за бирање на десној страни која ће отворити екран за бирање на клик. Икона за бирање изгледа само као 9 црних кутија, распоређених по 3, и мора да воли оно што видите на обичном телефону.
Користим тел тип улаза за правилну ХТМЛ5 семантику, али можете користити и текст ако желите.
2. Креирајте екран бирања
Тхе диал сцреен је мрежа бројева од 0 до 9 плус неки специјални знакови. Може се направити са или ХТМЛ Овде ћу вам показати како да креирате табелу за бирање екрана у ЈаваСцрипту. Наравно, можете додати табелу директно у ХТМЛ изворни код ако вам се тако свиђа. Прво, креирајте ново Адд а Два Последњи ред је другачији, како се састоји два специјална знака, Да бисте креирали последњи ред за екран бирања, додајте следеће Тхе заслон за бирање је сада завршен, додајте га у Да буде привлачнија, стилирајте екран за бирање витх ЦСС. Не мораш увек да се држиш мог стила, али не заборави додати Прво додајте Затим додајте алатку за бирање кликова икони са ЈаваСцриптом до пребаците видљивост екрана за бирање. Да бисте то урадили, морате да користите горе поменуто Тхе Додајте прилагођену функцију уноси цифре у поље телефонског броја клик на ћелије екрана за бирање. Тхе Сада, ви имате радни екран за бирање за унос броја телефонског броја. Да бисте пратили ЦСС, промените боју позадине цифара у њиховој Адд а једноставна регек валидација за потврду телефонског броја док је корисник уноси цифре у поље за унос. Према правилима за валидацију које користим, број телефона може да почне само са цифром или са Можете видети визуализацију мог регуларног израза на екрану испод који је креиран помоћу апликације Дебуггек. Број телефона можете проверити и према формату телефонског броја ваше земље или региона. Креирајте нови објект регуларног израза и спремите га у Када унос не потврди, Ја сам додавање црвене границе у поље за унос када је унос неважећи, али можете информисати корисника на друге начине, на пример, са порукама о грешкама. Тхе Напомињем да сам додао и додатна валидација за максимални број знакова (не може бити више од 15) помоћу знака Ваш избор броја телефона је сада спреман, погледајте коначни демо испод. или ЈаваСцрипт.
'сто' елемент у ДОМ помоћу цреатеЕлемент () метода. Такође му дајте 'бирај' идентификатор. / * Креирање екрана * / вар диал = доцумент.цреатеЕлемент ('табле'); диал.ид = 'бирај'; за лооп да уметнете четири реда табеле за бирање. Затим, за сваки ред, рун анотхер за лооп да би додали три ћелије по реду. Обележите сваку ћелију са 'диалДигит' класа. фор (вар ровНум = 0; ровНум < 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();
за петље изнад израчунавају цифре које улазе у ћелије табеле за бирање - вредности целл.тектЦонтент имовина - на следећи начин: (цолНум + 1) + (ровНум * 3) / * први ред * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * други ред * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * итд.
- и + који се користе у форматима телефонских бројева за идентификацију регионалних кодова и знаменки 0.ако изјаву унутрашњем за лооп. фор (вар ровНум = 0; ровНум < 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();
#диалВраппер ХТМЛ контејнер који сте креирали у кораку 1 помоћу две ДОМ методе:куериСелецтор () метход то изаберите контејнераппендЦхилд () метход то додајте екран за бирање - одржан у бира варијабла - до контејнера доцумент.куериСелецтор ('# диалВраппер'). аппендЦхилд (диал); 
3. Подесите екран за бирање
усер-селецт: ноне; имовине #диал контејнер тако да док корисник кликне на цифре, текст неће бити изабран од стране курсора. #диал видтх: 200пк; хеигхт: 200пк; бордер-цоллапсе: колапс; тект-алигн: центар; позиција: релативна; -мс-усер-селецт: ноне; -вебкит-усер-селецт: нема; -моз-усер-селецт: ноне; усер-селецт: ноне; цолор: # 000; бок-схадов: 0 0 6пк # 999; .диалДигит бордер: 1пк солид #ффф; курсор: показивач; бацкгроунд-цолор: ргба (255,228,142, .7);
4. Прикажите екран бирања на клик
видљивост: скривена; стиле руле то #диал у горњем ЦСС-у до сакрити екран за бирање подразумевано. приказује се само када корисник кликне на икону за бирање.куериСелецтор () анд тхе аддЕвентЛистенер () методе. Друго додаје догађај кликом на икону за бирање и позива обичај тогглеДиал () функције.тогглеДиал () функције мења видљивост екрана за бирање од скривеног до видљивог и назад. доцумент.куериСелецтор ('# диалИцон'). аддЕвентЛистенер ('клик', тогглеДиал); фунцтион тогглеДиал () диал.стиле.висибилити = диал.стиле.висибилити === 'хидден' || диал.стиле.висибилити === "?" видљиво ":" скривено "; 5. Додајте функционалност
позовите број() функције додаје цифре једну по једну до тектЦонтент поље за унос означено са #бр. телефона идентификатор. пхонеНо = доцумент.куериСелецтор ('# пхонеНо'); фунцтион диалНумбер () пхонеНо.валуе + = тхис.тектЦонтент; диалДигитс = доцумент.куериСелецторАлл ('. диалДигит'); за (вар и = 0; и < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); :лебдети и : ацтиве (када корисник кликне). .диалДигит: ховер бацкгроунд-цолор: ргб (255,228,142); .диалДигит: ацтиве бацкгроунд-цолор: # ФФ6478;
6. Додајте валидацију регуларног израза
+ и прихватите - након тога.
паттерн променљива. Такође креирајте обичај валидате () која проверава да ли је унет телефонски број одговара регуларном изразу, и ако је то најмање 8 знакова.валидате () функција треба дати повратну информацију кориснику. паттерн = нев РегЕкп ("^ ("> д 1,2)? (: \ т фунцтион валидате (ткт) // најмање 8 знакова за важећи телефон бр. иф (! паттерн.тест (ткт) || ткт.ленгтх < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Извршите валидацију
валидате () функције треба позвати како би извршили валидацију. Зови га из позовите број() коју сте креирали у кораку 5 да бисте потврдили вредност бр. телефона променљива.ако изјава. фунцтион диалНумбер () вар вал = пхонеНо.валуе + тхис.тектЦонтент; // максимални дозвољени знаци, 15 ако (вал.ленгтх> 15) врати фалсе; валидација (вал); пхонеНо.валуе = вал;
