Как да създадете прост избор на телефонен номер
Телефонни номера, Освен имена и имейли, най-често използваната информация за контакти в онлайн формуляри. Полетата за телефонен номер обикновено са проектирани по начин, който изисква от потребителите да въвеждат номерата при използване на техните клавиатури. Този метод често води до неточно въвеждане на данни.
Да се намаляване на грешките при въвеждане от потребителя и да подобрите потребителския опит на сайта си, можете да създадете GUI което позволява на потребителите бързо да въвеждат телефонния си номер, по начин, подобен на този, който взема дата.
В този урок ще видите как да го направите добавете обикновен избор на телефонен номер към поле за въвеждане. Ще използваме HTML5, CSS3 и JavaScript, за да стигнем до GUI, който можете да видите и тествате в демото по-долу. Ще използваме и регулярни изрази, за да сме сигурни, че потребителите наистина въвеждат валиден телефонен номер.
1. Създайте полето за телефонен номер
първи, създайте поле за въвеждане с икона за набиране отдясно, която ще отвори екрана за набиране при щракване. Иконата за набиране просто прилича на 9 черни кутии, подредени 3 на 3, които трябва да харесат това, което виждате на обикновен телефон.
Използвам тел входен тип за правилната семантика на HTML5, но можете да използвате и текст ако искате.
2. Създайте екрана за набиране
Най- екран за набиране е решетка от числа от 0 до 9 плюс някои специални символи. Може да се направи с или HTML Тук ще ви покажа как да създадете екранната таблица за набиране в JavaScript. Разбира се, можете да добавите таблицата директно в изходния код на HTML, ако предпочитате по този начин. Първо, създайте нов Добави Двете Последният ред е различен, както се състои два специални знака, За да създадете последния ред на екрана за набиране, добавете следното Най- екранът за набиране вече е завършен, добавете го към За да стане по-привлекателна, оформете екрана за набиране с CSS. Не е задължително да се придържате към стила ми, но не забравяйте добави Първо добавете След това добавете манипулатор на събития при натискане към иконата за набиране с JavaScript да се превключвате видимостта на екрана за набиране. За да направите това, трябва да използвате гореспоменатото Най- Добавете персонализирана функция, която въвежда цифри в полето на телефонния номер при щракване на клетките на екрана за набиране. Най- Сега имате работещ екран за набиране за въвеждане на поле за телефонен номер. За да поддържате CSS, променете цвета на фона на цифрите в техните Добави проста проверка на регулярните признаци за потвърждаване на телефонния номер, докато потребителят въвежда цифрите в полето за въвеждане. Според правилата за валидиране, които използвам, телефонният номер може да започва само с цифра или Можете да видите визуализацията на моя нормален израз на екрана по-долу, създаден с приложението Debuggex. Можете също така да потвърдите телефонния номер според формата на телефонния номер на вашата страна или регион. Създайте нов обект Regular Expression и го запазете в Когато входът не се потвърди, Аз съм добавяне на червена рамка към полето за въвеждане, когато входът е невалиден, но можете да информирате потребителя по други начини, например с съобщения за грешки. Най- Имайте предвид, че аз също добавих допълнителна проверка за максимален брой знаци (не може да бъде повече от 15) с помощта на Вашият избор на телефонен номер вече е готов, вижте финалната демонстрация по-долу. или JavaScript.
"Маса" елемент в. \ t DOM с помощта на createElement () метод. Също така му дайте "Набиране" идентификатор. / * Създаване на екран за набиране * / var dial = document.createElement ('table'); dial.id = 'набиране'; за контур да вмъкнете с него четирите реда на таблицата за набиране. След това, за всеки ред, изпълни друг за контур за да се добавят три клетки на ред. Маркирайте всяка клетка с "DialDigit" клас. за (var rowNum = 0; редNum < 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();
за Циклите по-горе изчисляват цифрите, които влизат в клетките на таблицата за набиране - стойностите на cell.textContent собственост - по следния начин: (colNum + 1) + (редNum * 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.ако изявление на вътрешното за контур. за (var rowNum = 0; редNum < 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 контейнер, който сте създали в Стъпка 1, като използвате две DOM методи:querySelector () метод изберете контейнераappendChild () метод добавете екрана за набиране - в. \ t циферблат променлива - към контейнера document.querySelector ( "# dialWrapper") appendChild (набиране).
3. Настройте екрана за набиране
потребителя изберете: няма; собственост на #dial контейнер така че докато потребителят кликне върху цифрите, текстът няма да бъде избран от курсора. #dial width: 200px; височина: 200px; граничен колапс: колапс; text-align: center; позиция: относителна; -ms-user-select: none; -webkit-user-select: няма; -moz-user-select: няма; user-select: няма; цвят: # 000; box-shadow: 0 0 6px # 999; .dialDigit граница: 1px твърдо #fff; курсор: указател; фонов цвят: rgba (255,228,142, .7);
4. Покажете екрана за набиране при щракване
видимост: скрит; стил правило #dial в горния CSS да се скриете екрана за набиране по подразбиране. ще се показва само когато потребителят кликне върху иконата за набиране.querySelector () и addEventListener () методи. Последното прикачва събитие за кликване към иконата за набиране и извиква персонализирания toggleDial () функция.toggleDial () функция променя видимостта на екрана за набиране от скрит към видим и обратно. document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); функция toggleDial () dial.style.visibility = dial.style.visibility === 'скрит' || dial.style.visibility === "?" видим ":" скрит "; 5. Добавете функционалността
набери номер() функция добавя цифрите един по един към textContent на полето за въвеждане, маркирано с #телефон не идентификатор. phoneNo = document.querySelector ("# phoneNo"); функция dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); за (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); : навъртам и :активен (когато потребителят кликне върху него). .dialDigit: hover фон-цвят: rgb (255,228,142); .dialDigit: активен цвят на фона: # FF6478;
6. Добавете валидиране на регулярни изрази
+ и приемете - след това.
модел променлива. Също така създайте потребителски валидиране () функция, която проверява дали въведеният телефонен номер отговаря на нормалния израз, и ако е така най-малко 8 символа.валидиране () трябва да функционира дават обратна връзка на потребителя. pattern = new RegExp ("^ (+) \ _ d 1,2)? (\ t функция validate (txt) // поне 8 символа за валиден телефонен номер if (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Извършете проверката
валидиране () функции трябва да се извика за да извърши валидирането. Обадете се от набери номер() функция, която сте създали в Стъпка 5, за да потвърдите стойността на телефон не променлив.ако изявление. функция dialNumber () var val = phoneNo.value + this.textContent; // максимално допустими знаци, 15 ако (val.length> 15) връщаме false; валидиране (Val); phoneNo.value = val;
