Как создать простой сборщик телефонных номеров
Телефонные номера, помимо имен и адресов электронной почты, наиболее часто используемые контактные данные в онлайн-формах. Поля телефонных номеров обычно разрабатываются таким образом, что пользователи должны вводить цифры с помощью своих клавиатур. Этот метод часто приводит к неточному вводу данных.
к уменьшить ошибки ввода пользователя и улучшить пользовательский опыт вашего сайта, вы можете создать графический интерфейс пользователя это позволяет пользователям быстро вводить свой номер телефона, аналогично тому, как выбирают даты.
В этом уроке вы увидите, как добавить простое средство выбора номера телефона в поле ввода. Мы будем использовать HTML5, CSS3 и JavaScript, чтобы добраться до графического интерфейса, который вы можете увидеть и протестировать в демоверсии ниже. Мы также будем использовать регулярные выражения, чтобы пользователи действительно вводили действительный номер телефона..
1. Создайте поле номера телефона
Первый, создать поле ввода со значком набора справа, который откроет экран набора при щелчке. Значок циферблата выглядит как 9 черных ящиков, расположенных 3 на 3, должно соответствовать тому, что вы видите на обычном телефоне.
Я использую телефон тип ввода для правильной семантики HTML5, но вы также можете использовать текст тип ввода, если вы хотите.
2. Создайте экран набора
экран набора является сетка чисел от 0 до 9 плюс некоторые специальные символы. Это может быть сделано с либо HTML Здесь я покажу вам, как создать таблицу экранов набора в JavaScript. Вы можете, конечно, добавить таблицу непосредственно в исходный код HTML, если вы предпочитаете ее таким образом. Сначала создайте новый Добавить Два Последний ряд отличается, так как он состоит из два специальных символа, Чтобы создать последнюю строку на экране набора, добавьте следующее экран набора завершен, добавить его в Чтобы сделать его более привлекательным, стиль экрана набора с CSS. Вам не обязательно придерживаться моего стиля, но не забудьте добавлять Сначала добавьте Затем добавьте обработчик события щелчка к значку набора с JavaScript в переключать видимость экрана набора. Для этого вам необходимо использовать вышеупомянутое Добавьте пользовательскую функцию, которая ввод цифр в поле номера телефона по щелчку ячеек экрана набора. Теперь у вас есть рабочий экран набора ввести номер телефона в поле. Чтобы не отставать от CSS, измените цвет фона цифр в их Добавить простая проверка регулярных выражений подтвердить номер телефона, пока пользователь вводит цифры в поле ввода. В соответствии с правилами проверки, которые я использую, номер телефона может начинаться только с цифры или На следующем скриншоте, созданном с помощью приложения Debuggex, вы можете увидеть визуализацию моего регулярного выражения.. Вы также можете проверить номер телефона в соответствии с форматом номера телефона вашей страны или региона.. Создайте новый объект Regular Expression и сохраните его в Когда ввод не проверяется, я добавление красной рамки в поле ввода, когда ввод недействителен, но вы можете информировать пользователя другими способами, например, с сообщениями об ошибках. Обратите внимание, что я также добавил дополнительная проверка для максимальных символов (не более 15) с помощью Ваш сборщик телефонных номеров теперь готов, посмотрите финальную демонстрацию ниже. или JavaScript.
'Таблица' элемент в DOM используя createElement () метод. И дать ему 'набирать номер' идентификатор. / * Создать экран набора номера * / var dial = document.createElement ('table'); dial.id = 'dial'; за петля вставить четыре строки таблицы набора с ним. Тогда для каждого ряда, запустить другой за петля чтобы добавить три клетки в строке. Отметить каждую клетку с 'DialDigit' учебный класс. для (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();
за Вышеуказанные циклы вычисляют цифры, которые входят в ячейки таблицы набора - значения cell.textContent свойство - следующим образом: (colNum + 1) + (rowNum * 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; 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 HTML-контейнер, созданный на шаге 1 с помощью два метода DOM:querySelector () метод для выберите контейнерAppendChild () метод для добавить экран набора - проводится в набирать номер переменная - в контейнер document.querySelector ( '# dialWrapper') AppendChild (набрать).
3. Стиль экрана набора
пользователь не выбрать: нет; собственность на #набирать номер контейнер так что пока пользователь нажимает на цифры, текст не будет выделен курсором. #dial width: 200px; высота: 200 пикселей; коллапс границы: коллапс; выравнивание текста: по центру; положение: относительное; -ms-user-select: нет; -webkit-user-select: нет; -moz-user-select: нет; выбор пользователя: нет; цвет: # 000; тень от рамки: 0 0 6px # 999; .dialDigit border: 1px solid #fff; курсор: указатель; цвет фона: rgba (255 228 142, 0,7);
4. Показать экран набора по щелчку
видимость: скрытый; правило стиля для #набирать номер в приведенном выше CSS в скрыть экран набора по умолчанию. это будет показано только тогда, когда пользователь нажимает на значок набора.querySelector () и addEventListener () методы. Последний прикрепляет событие клика на значок набора и вызывает обычай toggleDial () функция.toggleDial () функция меняет видимость экрана набора номера от скрытого к видимому и обратно. document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); function toggleDial () dial.style.visibility = dial.style.visibility === 'hidden' || dial.style.visibility === "? 'visible': 'hidden'; 5. Добавьте функциональность
наберите номер() функция добавляет цифры одну за другой к TextContent свойство поля ввода, помеченное #номер телефона идентификатор. phoneNo = document.querySelector ('# phoneNo'); function dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); для (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); : парить а также : активный (когда пользователь нажимает на него) заявляет. .dialDigit: hover background-color: rgb (255,228,142); .dialDigit: active background-color: # FF6478;
6. Добавьте проверку правильности регулярного выражения.
+ характер, и принять - персонаж впоследствии.
шаблон переменная. Также создайте кастом проверки () функция, которая проверяет, введен ли номер телефона соответствует регулярному выражению, и если это не менее 8 символов.проверки () функция должна дать обратную связь пользователю. pattern = new RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); function 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 для проверки значения номер телефона переменная.если заявление. function dialNumber () var val = phoneNo.value + this.textContent; // максимально допустимое количество символов, 15 if (val.length> 15) return false; проверки (значение); phoneNo.value = val;
