Блог

Я пытаюсь создать простой счетчик символов, который показывает, ввел ли пользователь минимальное количество символов, прежде чем они смогут нажать enter.

 $(document).ready(function(){

 $('#notification').hide();
 $('#press_enter_notification').hide();  

   var allow_enter = false;
   var min = 4;
   var max = 30;
   var char_count = 0;

   $("#form_textbox").keydown(function() {

      $('#press_enter_notification').hide();  

      if(this.value.length < min) {
         char_count = min - (this.value.length) -1;
         //alert('Too short');
         $('#notification').show("fast");
         $('#notification').text(char_count   ' more characters to go');
         allow_enter = false;

      } else if(this.value.length >= max) {
         char_count = (this.value.length) - max;
         this.value = this.value.substring(0,max);
         $('#notification').show("fast");
         $('#notification').text(' no more characters remaining');

      } else {
         char_count = max - (this.value.length) -1;
         $('#notification').show("fast");
         $('#notification').text(char_count   ' characters remaining');
         $('#press_enter_notification').show("fast");
         allow_enter = true;
      }   
   });

   $("form").submit( function () {
      if (allow_enter == false)
      {
         $('#press_enter_notification').show("fast").text('you cannot press enter yet');
         return allow_enter;
      }  
   } );


});  
  

Это работает, однако у него есть следующие особенности:

1. Когда вы что-то вводите и удаляете весь текст, сообщение о количестве символов не исчезает и не отсчитывается в обратном направлении
2. Когда вы удаляете все, что указывает на то, что осталось еще 3 символа, мне пришлось добавить -1 в if(this.value.length < min) {
char_count = min - (this.value.length) -1; , в противном случае он позволяет ввести 5 символов, прежде чем перестанет указывать, что осталось еще 3,2,1 символа.

Если вы попробуете это в браузере или jsbin, вы их заметите. Как я могу структурировать это, чтобы отсортировать его?

Спасибо.

Вам нужно изменить keydown() на keyup() , поскольку длина не зарегистрирована до полного завершения нажатия клавиши. Единственное, что вам нужно проверить на keydown, — это предотвращаете ли вы значение по умолчанию для таких вещей, как return или tab.

Вы также можете удалить ошибку -1 прямо сейчас.

Скрипта JS:http://jsfiddle.net/VPD3j /

Одна из проблем заключается в том, что keydown срабатывает до того, как выполняется действие этого нажатия клавиши. Вы можете исправить это, изменив на keyup . Существует много проблем со счетчиками символов при нажатии клавиши (независимо от нажатия клавиши, нажатия клавиши и т.д.). Например, что, если человек удерживает нажатой кнопку, четный срабатывает один раз.

Я бы рассмотрел один из многих уже созданных плагинов. http://plugins .jquery.com/plugin-tags/character-counter

РЕДАКТИРОВАТЬ: Небольшое изменение, вы, вероятно, захотите привязать ввод, сведение клавиш и нажатие клавиш. Это позволит обойти несколько проблем:

 $("#form_textbox").bind("keydown keyup keypress"...