Как запустить функцию, когда поле заполнено?

Question

[Евгений Журов]

Добрый день. Есть инпут, в котором пользователь должен ввести ровно 18 символов. После этого автоматически должна запускаться функция с таймером обратного отсчета. Если написать что-то подобное:

$("#elem").keyup(function() {
      var counter = $("input").val();
      if (counter.length >= 18) { // или counter.length === 18, без разницы
            /* функция с таймером */
}

то оно нормально работает, если символы водить медленно. Если же ввести слишком быстро, случайно нажав при этом лишние клавиши, то таймер отсчитывает числа не по заданному интервалу в 1 секунду, а гораздо быстрей и урывками.
Можно ли как-то жестко задать условие, что если введено ровно 18 символов, то все прочие нажатия клавиш игнорируются, а то сейчас выходит так, что даже когда введено 18 символов, а клавиши продолжают нажиматься, то эти нажатия тоже учитываются.

Answer 1

[kulaeff]

Нужно указать у инпута атрибут maxlength="18" и вместо keyup нужно использовать событие input: https://jsfiddle.net/58n0e6w4/1/

Comments

[Евгений Журов]

Отлично! Большое спасибо!

Answer 2

[Алексей Шашенков]

$("#elem").keyup(function() {
   var $input=$("input");
      var counter = $input.val();
      if (counter.length >= 18) { // или counter.length === 18, без разницы
           $input.val(counter .slice(0, 18))
}

Не дасто вводить более 18 символов

Comments

[Евгений Журов]

Спасибо, но не помогает, к сожалению(

Answer 3

[Stalker_RED]

<input type="text" maxlength="18" id="elem">

$("#elem").on('keyup', myHandler);
function myHandler(){
  if (this.value.length === 18) {
    /*  запускаем таймер */
    $(this).off(myHandler) // и убираем обработчик нажатия
  }
}