При вводе символов телефонного номера курсор автоматически переходит дальше. Также поддерживаются кнопки со стрелками и Backspace. Есть возможность показать настраиваемое сообщение об ошибке.
<head>
...
<link rel="stylesheet" href="phone-number.css">
<script type="module">
import phoneNumberComponentFactory from 'phone-number.js'
...
</script>
...
</head>let component = phoneNumberComponentFactory({
// маска телефонного номера, смотрите описание ниже
mask: '+7(985)0II-**-**',
// текст для ошибки (если не указан, то используется текст по умолчанию, указанный здесь)
errorText: 'Неверный номер, попробуйте ещё раз'
})
someContainer.appendChild(component)
someButton.onclick = () => {
doSomethingWithPhoneNumber(component.getFullValue())
}Тестовый пример страницы с использованием этого компонента
Маска телефонного номера может содержать следующие символы:
I- односимвольное поле для ввода одной цифрыX- серый блок с символомX*- серый блок с символом●<цифра>- серый блок с введённой цифрой<не цифра>- символ отображается "как есть"
setErrorState(state: boolean)- показывает или скрывает сообщение об ошибкеgetInputs()- возвращает массив с инпутами, которые используются в компонентеgetInputValue()- возвращает значение всех полей в виде одной строкиgetFullValue()- возвращает полный введённый телефонный номер (пустым полям соответствует символ_)clearValue()- очищает все поля
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent