Домашня » UI / UX » Як створити простий вибір номера телефону

    Як створити простий вибір номера телефону

    Номери телефонів, крім імен та електронних листів, найбільш часто використовувані контактні дані в онлайн-формах. Поля телефонних номерів зазвичай розробляються таким чином, щоб користувач міг вводити номери у своїх клавіатурах. Цей метод часто призводить до неточного введення даних.

    До зменшити помилки вводу користувача і покращити роботу користувача вашого сайту, можна створити GUI що дозволяє користувачам швидко вводити свій номер телефону таким чином, що схожий на дату збирання.

    У цьому підручнику ви побачите, як це зробити додайте простий вибір номера телефону до поля введення. Ми будемо використовувати HTML5, CSS3 і JavaScript, щоб дістатися до графічного інтерфейсу, який можна побачити і протестувати в демонстраційній версії нижче. Ми також будемо використовувати регулярні вирази, щоб переконатися, що користувачі дійсно ввели дійсний номер телефону.

    1. Створіть поле Номер телефону

    Спочатку, створити поле введення з піктограмою набору, розташованої праворуч, яка відкриє екран набору номера. Значок циферблату виглядає так, як 9 чорних ящиків, розташованих по 3 на 3, які, як ви можете бачити на звичайному телефоні.

    Я використовую тел Тип введення для правильної семантики HTML5, але ви також можете використовувати текст тип введення, якщо потрібно.

     
    HTML-база вибору номера телефону
    2. Створіть екран набору

    The екрану набору є сітка чисел від 0 до 9 плюс деякі спеціальні символи. Це можна зробити з або HTML

    або JavaScript.

    Тут я покажу вам, як створити таблицю екрану набору в JavaScript. Ви можете, звичайно, додати таблицю безпосередньо до вихідного коду HTML, якщо ви віддаєте перевагу такому шляху.

    Спочатку створіть нове "таблиця" елемент в DOM за допомогою createElement () метод. Також дайте йому 'набрати' ідентифікатор.

     / * Створити екран набору * / var dial = document.createElement ('table'); dial.id = 'набір'; 

    Додати a для петлі вставити з нього чотири рядки таблиці набору. Потім для кожного рядка, запустити іншу для петлі для того, щоб додати три клітини на рядок. Позначте кожну клітинку з "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();   

    The тепер завершено, додайте його до #dialWrapper HTML-контейнер, який ви створили на кроці 1, використовуючи два методи DOM:

    1. querySelector () метод до виберіть контейнер
    2. appendChild () метод до додати екран набору - проведено в набору змінна - до контейнера
     document.querySelector ('# dialWrapper'). appendChild (набір); 
    Настільний екран без набору тексту
    3. Стиль екрана набору

    Щоб зробити його більш привабливим, Стиль екрану набору з CSS.

    Ви не обов'язково повинні дотримуватися мого стилю, але не забувайте add 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 до приховати екран набору за замовчуванням. воно буде показано лише тоді, коли користувач натискає на значок набору.

    Потім додайте обробник подій натискання на піктограму набору з JavaScript до перемикання видимості екрана набору.

    Для цього потрібно скористатися вищезгаданим querySelector () і addEventListener () методів. Лист додає подію натискання на значок набору і викликає користувальницький toggleDial () функції.

    The toggleDial () функції змінює видимість екрану набору від прихованого до видимого і назад.

     document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); function toggleDial () dial.style.visibility = dial.style.visibility === 'прихований' || dial.style.visibility === "?" видимий ":" прихований "; 
    5. Додайте функціональність

    Додайте спеціальну функцію вводить цифри в поле номера телефону на клітинках екрана набору.

    The номер номера () функції додає цифри по одному до 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);  

    Тепер у вас є робочий екран набору для введення номера телефону.

    Щоб не відставати від CSS, змініть колір тла цифр у своїх : hover і : active (коли користувач натискає на нього).

     .dialDigit: hover background-color: rgb (255,228,142);  .dialDigit: active background-color: # FF6478;  
    6. Додати перевірку регулярних виразів

    Додати a проста перевірка регулярності для перевірки номера телефону під час користування вводить цифри у поле введення. Згідно з правилами перевірки, які я використовую, номер телефону може починатися лише з цифри або + і прийняти - пізніше.

    Ви можете побачити візуалізацію мого регулярного виразу на екрані нижче, створеному за допомогою програми Debuggex.

    Візуалізація Regex з debuggex.com

    Ви також можете підтвердити номер телефону відповідно до формату телефонного номера вашої країни або регіону.

    Створіть новий об'єкт Regular Expression і збережіть його в візерунок змінної. Також створіть звичай перевірити () функція, яка перевіряє, чи введений номер телефону відповідає регулярному виразу, і якщо це не менше 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. Виконайте перевірку

    The перевірити () функції потрібно викликати для виконання перевірки. Зателефонуйте йому з номер номера () функцію, яку ви створили на кроці 5, щоб перевірити значення номер телефону змінної.

    Зауважте, що я також додав додаткову перевірку для максимального числа символів (не більше 15) за допомогою якщо заяву.

     функція dialNumber () var val = phoneNo.value + this.textContent; // максимальна кількість символів дозволена, 15 якщо (val.length> 15) повертається false; валідація (val); phoneNo.value = val;  

    Ваш вибір номера телефону тепер готовий, ознайомтеся з останньою демонстрацією нижче.

    © Savtec
    Корисна інформація та поради по веб-розробці. Програмування, веб-дизайн, CSS, HTML, JAVASCRIPT. Налагодження та перевстановлення WINDOWS. Створення сайтів і додатків з нуля.