Ограничение на ввод цифр в инпут | Блог веб-разработчика MaxGraph

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

 
Сегодня разберемся, как ограничивать ввод цифр в инпут по определенному количеству. Бывают, например, ситуации, когда нужно сделать дополнительный инпут к телефону, в котором будет добавочный номер из 4 цифр. В таком случае нужно сделать так, чтобы пользователь больше 4 цифр ввести не мог. Как сделать такое на jQuery — показываю.

1
2
3
4
5
6
7
8
9
10
11
12
var max_chars = 4;
$('input').keydown(function(e){
  if ($(this).val().length >= max_chars) { 
    $(this).val($(this).val().substr(0, max_chars));
  }
});
 
$('input').keyup(function(e){
  if ($(this).val().length >= max_chars) { 
    $(this).val($(this).val().substr(0, max_chars));
  }
});
var max_chars = 4;
$('input').keydown(function(e){
  if ($(this).val().length >= max_chars) { 
    $(this).val($(this).val().substr(0, max_chars));
  }
});

$('input').keyup(function(e){
  if ($(this).val().length >= max_chars) { 
    $(this).val($(this).val().substr(0, max_chars));
  }
});

Логика максимально проста. Задаем количество символов в переменной max_chars. Затем, используя события нажатия\отпуская кнопок — пишем функции.
Внутри функции условие — если длина вводимых данных больше или равна max_chars — о, используем метод substr, чтобы удалить ненужные вводимые символы ПОСЛЕ четырех введенных.

12345 (Пока оценок нет)
Загрузка...

Метки: , ,

Понравилось? Расскажи другим!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Максим Васянович

Я являюсь автором этого блога, а также занимаюсь разработкой сайтов. Любой feedback по каналу на YouTube или этому блогу принимаю по форме (либо пишите Вконтакте). Надеюсь на Вас.

Напишите мне Смотрите меня