Длина не возвращает правильное значение

Question

У меня есть следующий код:

$(document).ready(function (e) { 

    $('#input').keydown(function (e) 
    { 
     var inpData_lenght = $(this).val().length+1; 
     var max_length  = 15; 
     if (inpData_lenght >= max_length) 
     { 
      if (inpData_lenght > max_length) 
      { 
       if ((e.keyCode != 8) && (e.keyCode != 46)) 
       { 
        e.stopImmediatePropagation(); 
        e.preventDefault(); 
       } 
      } 

      $(this).css({'background-color': '#ff8080'}); 
     } 
     else 
     { 
      $(this).css('background-color', ''); 
     } 
    }); 
}); 

HTML:

<textarea id="input"></textarea> 

(fiddle)

текстовое поле не меняет фон обратно на белый, когда есть max_length-1 символов, но только на max_length-3, есть ли обходной путь? Я знаю, что это связано с обратным пространством или удалением, которое считается символом.

EDIT: Я могу использовать только keydown, потому что это единственный связанный с ключом обратный вызов, поддерживаемый плагином.

Answer 1

Если вам нужен обходной путь для keydown, должно работать:

var maxLength = 15; 
var currLength = this.value.length; 
if (e.keyCode == 8 || e.keyCode == 46) { 
    var expectedLength = currLength - 1; // distinguish here! 
} else { 
    var expectedLength = currLength + 1; 
    if (expectedLength > maxLength) { 
     e.stopImmediatePropagation(); 
     e.preventDefault(); 
    } 
} 
if (expectedLength >= maxLength) { 
    $(this).css('background-color', '#ff8080'); 
} else { 
    $(this).css('background-color', ''); 
} 

Answer 2

Лучше использовать keyup() вместо keydown(), потому что вы получите полученное значение ввода. Если длина превышает максимальную, просто замените входное значение на предыдущий. http://jsfiddle.net/9Ed8h/

$(document).ready(function (e) { 

    $('#input').keyup(function (e) 
    { 
     var inpData_lenght = $(this).val().length; 
     var max_length  = 15; 
     if (inpData_lenght >= max_length) 
     { 
      if (inpData_lenght > max_length) 
      { 
       $(this).val(this.lastValue); 
      } 

      $(this).css({'background-color': '#ff8080'}); 
     } 
     else 
     { 
      $(this).css('background-color', ''); 
     } 
     this.lastValue = $(this).val(); 
    }); 
}); 

Answer 3

Вместо того чтобы использовать яваскрипт условие, которое вы можете использовать что-то вроде этого

<textarea maxlength="15" id="input"/> 

Answer 4

Использования KeyUp решит вашу проблему. Вы должны думать о том, как предотвратить людей, удерживающих их ключ. (Если удерживать клавишу в течение 2 секунд, ваш предел 15 символов будет превышен)

How to disable repetitive keydown in jQuery

Answer 5

Объединить MaxLength и KeyUp должен быть самым простым способом.

<textarea id="input" maxlength=3></textarea> 

И

$(document).ready(function (e) { 

    $('#input').keyup(function (e) 
    { 
     var inpData_lenght = $(this).val().length; 
     var max_length  = 3; 
     if (inpData_lenght >= max_length) 
     { 
      $(this).css({'background-color': '#ff8080'}); 
     } 
     else 
     { 
      $(this).css('background-color', ''); 
     } 
    }); 
}); 

Смотрите скрипку: http://jsfiddle.net/DEjgd/4/