назад к статьям

Ограничение на ввод цифр в инпут

Содержание

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, чтобы удалить ненужные вводимые символы ПОСЛЕ четырех введенных.

предыдущий пост следующий пост