Як створити простий вибір номера телефону
Номери телефонів, крім імен та електронних листів, найбільш часто використовувані контактні дані в онлайн-формах. Поля телефонних номерів зазвичай розробляються таким чином, щоб користувач міг вводити номери у своїх клавіатурах. Цей метод часто призводить до неточного введення даних.
До зменшити помилки вводу користувача і покращити роботу користувача вашого сайту, можна створити GUI що дозволяє користувачам швидко вводити свій номер телефону таким чином, що схожий на дату збирання.
У цьому підручнику ви побачите, як це зробити додайте простий вибір номера телефону до поля введення. Ми будемо використовувати HTML5, CSS3 і JavaScript, щоб дістатися до графічного інтерфейсу, який можна побачити і протестувати в демонстраційній версії нижче. Ми також будемо використовувати регулярні вирази, щоб переконатися, що користувачі дійсно ввели дійсний номер телефону.
1. Створіть поле Номер телефону
Спочатку, створити поле введення з піктограмою набору, розташованої праворуч, яка відкриє екран набору номера. Значок циферблату виглядає так, як 9 чорних ящиків, розташованих по 3 на 3, які, як ви можете бачити на звичайному телефоні.
Я використовую тел Тип введення для правильної семантики HTML5, але ви також можете використовувати текст тип введення, якщо потрібно.
2. Створіть екран набору
The екрану набору є сітка чисел від 0 до 9 плюс деякі спеціальні символи. Це можна зробити з або HTML Тут я покажу вам, як створити таблицю екрану набору в JavaScript. Ви можете, звичайно, додати таблицю безпосередньо до вихідного коду HTML, якщо ви віддаєте перевагу такому шляху. Спочатку створіть нове Додати a Два Останній ряд відрізняється, як він складається два спеціальних символи, Щоб створити останній рядок на екрані набору, додайте наступне The тепер завершено, додайте його до Щоб зробити його більш привабливим, Стиль екрану набору з CSS. Ви не обов'язково повинні дотримуватися мого стилю, але не забувайте add Спочатку додайте Потім додайте обробник подій натискання на піктограму набору з JavaScript до перемикання видимості екрана набору. Для цього потрібно скористатися вищезгаданим The Додайте спеціальну функцію вводить цифри в поле номера телефону на клітинках екрана набору. The Тепер у вас є робочий екран набору для введення номера телефону. Щоб не відставати від CSS, змініть колір тла цифр у своїх Додати a проста перевірка регулярності для перевірки номера телефону під час користування вводить цифри у поле введення. Згідно з правилами перевірки, які я використовую, номер телефону може починатися лише з цифри або Ви можете побачити візуалізацію мого регулярного виразу на екрані нижче, створеному за допомогою програми Debuggex. Ви також можете підтвердити номер телефону відповідно до формату телефонного номера вашої країни або регіону. Створіть новий об'єкт Regular Expression і збережіть його в Коли вхід не підтверджується, Я додавання червоної рамки до поля введення, коли вхід недійсний, але ви можете інформувати користувача іншими способами, наприклад, з повідомленнями про помилки. The Зауважте, що я також додав додаткову перевірку для максимального числа символів (не більше 15) за допомогою Ваш вибір номера телефону тепер готовий, ознайомтеся з останньою демонстрацією нижче. або JavaScript.
"таблиця" елемент в DOM за допомогою createElement () метод. Також дайте йому 'набрати' ідентифікатор. / * Створити екран набору * / var dial = document.createElement ('table'); dial.id = 'набір'; для петлі вставити з нього чотири рядки таблиці набору. Потім для кожного рядка, запустити іншу для петлі для того, щоб додати три клітини на рядок. Позначте кожну клітинку з "dialDigit" клас. for (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) + (рядок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.якщо твердження до внутрішнього для петлі. for (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. Стиль екрана набору
user-select: none; майно до #dial контейнер так що в той час як користувач натискає на цифри, текст не буде вибрано курсором. #dial width: 200px; висота: 200px; border-collapse: колапс; text-align: center; позиція: відносна; -ms-user-select: none; -webkit-user-select: немає; -moz-user-select: немає; user-select: none; колір: # 000; box-shadow: 0 0 6px # 999; .dialDigit border: 1px solid #fff; курсор: покажчик; фоновий колір: rgba (255,228,142, .7);
4. Відображення екрана набору на клацання
видимість: прихована; стиль правила #dial у вищезгаданому CSS до приховати екран набору за замовчуванням. воно буде показано лише тоді, коли користувач натискає на значок набору.querySelector () і addEventListener () методів. Лист додає подію натискання на значок набору і викликає користувальницький toggleDial () функції.toggleDial () функції змінює видимість екрану набору від прихованого до видимого і назад. document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); function 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); : hover і : active (коли користувач натискає на нього). .dialDigit: hover background-color: rgb (255,228,142); .dialDigit: active background-color: # FF6478;
6. Додати перевірку регулярних виразів
+ і прийняти - пізніше.
візерунок змінної. Також створіть звичай перевірити () функція, яка перевіряє, чи введений номер телефону відповідає регулярному виразу, і якщо це не менше 8 символів.перевірити () потрібно функція дайте відгук користувачеві. pattern = new RegExp ("^ (: \ _ d 1,2)? (\ _ d + \ _ - * \ t 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, щоб перевірити значення номер телефону змінної.якщо заяву. функція dialNumber () var val = phoneNo.value + this.textContent; // максимальна кількість символів дозволена, 15 якщо (val.length> 15) повертається false; валідація (val); phoneNo.value = val;
