0

Есть скрипт, который ограничивает кол-во вводных символов до 3х и разрешены только цифры.

Но баг в том, что после того, как ввел 3 символа, убрал фокус с инпута, а потом еще раз взял в фокус инпут, то 3-й символ удаляется.

Как исправить скрипт так, чтобы можно было вводить ТОЛЬКО цифры, НЕЛЬЗЯ вводить первым 0, ограничить ввод только до 3 символов?

$('body').on('click keypress', '.btn-input', function(key) {
  $this = $(this);
  $maxLen = 2;
  if (key.charCode < 48 || key.charCode > 57) return false;
  if ($this.val().length > $maxLen)
    $this.val($this.val().substr(0, $maxLen));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="btn-input order-count" type="text" >

https://jsfiddle.net/4gym7k8h/

5
  • замени keypress на keyup, а строку if (key.charCode < 48 || key.charCode > 57) return false; поставь в самый конец, 8 мар 2017 в 15:40
  • Да, работает. Но мне не нравится то, что символы пропадают на глазах, а хотелось, чтобы они просто не вводились. + Я могу вводить буквы, а до этого буквы не вводились
    – GilB Ert
    8 мар 2017 в 15:47
  • ну ладно, тогда после $maxLen = 2; оставь вот так только: if ($this.val().length > $maxLen) return false; if (key.charCode < 48 || key.charCode > 57) return false; ........... jsfiddle.net/4gym7k8h/1 8 мар 2017 в 15:52
  • Во, так работает. Но как теперь сделать, чтобы 0 первым нельзя было ввести?
    – GilB Ert
    8 мар 2017 в 15:57
  • немного логики и if ($this.val().length == 0 && key.charCode == 48) return false; 8 мар 2017 в 16:01

1 ответ 1

1

$('body').on('click keypress', '.btn-input', function(key) {
  $this = $(this);
  $maxLen = 2;
  // ограничение по длине
  if ($this.val().length > $maxLen)
    return false;
  // ограничение по вводу нуля в начале
  if ($this.val().length == 0 && key.charCode == 48)  
    return false;
  // ограничение по символам
  if (key.charCode < 48 || key.charCode > 57) 
    return false;  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="btn-input order-count" type="text" >

2
  • Следует заметить, что данный вариант все равно позволяет вставить в поле (Ctrl-V) произвольный текст произвольной длины. :)
    – Yaant
    8 мар 2017 в 20:14
  • @Yaant ну тут в зависимости от типа браузера и пожелания трудящихся зависит всё. Например для некоторых браузеров вообще достаточно написать атрибут maxlength="3" в инпуте и не париться скриптом и не беспокоится о Ctrl-V )) так или иначе если поле рассчитано на конкретное количество цифр, то юзеру нет смысла обманывать. А если специально обманывает, то это плохой дядя и от него, так или иначе, проверка на сервере должна быть..... в общем, тут можно много чего и навернуть и пришлёпать...... всё зависит.... 8 мар 2017 в 20:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.