JS 1 min
Ограничение на ввод цифр в инпут
Привет! Снова короткая, но довольно интересная темка со скриптом) Сегодня разберемся, как ограничивать ввод цифр в инпут по определенному количеству. Бывают, например, ситуации, когда нужно сделать дополнительный инпут к телефону, в котором будет добавочный номер из 4 цифр. В таком случае нужно сделать так, чтобы пользователь больше 4 цифр ввести не мог. Как сделать такое на JS - показываю
HTML
<input type="text" class="input">Див, в который мы можем вводить данные.
JS
const maxChars = 4;
const input = document.querySelector('.input');
input.addEventListener('keydown', function(){
if (this.value.length >= maxChars) {
this.value = this.value.substr(0, maxChars);
}
});
input.addEventListener('keyup', function(){
if (this.value.length >= maxChars) {
this.value = this.value.substr(0, maxChars);
}
});Логика максимально проста. Задаем количество символов в переменной maxChars. Затем, используя события нажатия/отпуская кнопок - пишем функции. Внутри функции условие - если длина вводимых данных больше или равна maxChars - о, используем метод substr, чтобы удалить ненужные вводимые символы ПОСЛЕ четырех введенных.
Об авторе блога
