Проверка максимальной длины текстовой области jQuery - PullRequest
Новая
       28

Проверка максимальной длины текстовой области jQuery

4 голосов
/ 29 июля 2011

У меня есть следующий код, который хорошо работает, но проблема в том, что после превышения 500 символов он начинает позволять пользователю печатать (он принимает символы вместо того, чтобы ограничивать их!).

Как я могу изменить это? Есть ли возможность обобщить этот код, чтобы он мог обрабатывать несколько текстовых областей, например, функцию и просто передавать параметры? 

 $('#txtAboutMe').keyup(function () {
           var text = $(this).val();
           var textLength = text.length;`enter code here`
           if (text.length > maxLength) {
               $(this).val(text.substring(0, (maxLength)));
               alert("Sorry, you only " + maxLength + " characters are allowed");
           }
           else {
               //alert("Required Min. 500 characters");
           }
       });"

Ответы [ 3 ]

8 голосов
/ 29 июля 2011

Вы не должны делать на keyup. Попробуйте keypress вместо этого. Проблема в keyup, символ уже запущен и записан в textarea. Вот хороший учебник . Обратите внимание на событие нажатия клавиши. 

jQuery(function($) {

  // ignore these keys
  var ignore = [8,9,13,33,34,35,36,37,38,39,40,46];

  // use keypress instead of keydown as that's the only
  // place keystrokes could be canceled in Opera
  var eventName = 'keypress';

  // handle textareas with maxlength attribute
  $('textarea[maxlength]')

    // this is where the magic happens
    .live(eventName, function(event) {
      var self = $(this),
          maxlength = self.attr('maxlength'),
          code = $.data(this, 'keycode');

      // check if maxlength has a value.
      // The value must be greater than 0
      if (maxlength && maxlength > 0) {

        // continue with this keystroke if maxlength
        // not reached or one of the ignored keys were pressed.
        return ( self.val().length < maxlength
                 || $.inArray(code, ignore) !== -1 );

      }
    })

    // store keyCode from keydown event for later use
    .live('keydown', function(event) {
      $.data(this, 'keycode', event.keyCode || event.which);
    });

});
5 голосов
/ 29 июля 2011

Вы можете попытаться определить maxLength, который будет использоваться для сравнения (если он не определен, равен undefined, а каждое число больше, чем undefined: поэтому я думаю, что вы никогда не получаете предупреждение): 

$('#txtAboutMe').keyup(function () {
           var maxLength = 500;
           var text = $(this).val();
           var textLength = text.length;
           if (textLength > maxLength) {
               $(this).val(text.substring(0, (maxLength)));
               alert("Sorry, you only " + maxLength + " characters are allowed");
           }
           else {
               //alert("Required Min. 500 characters");
           }
       });"
0 голосов
/ 25 октября 2013

Решение в два раза:

  • использовать событие keydown вместо keyup, чтобы перехватить событие до вставки буквы

  • используйте warnDefault, чтобы остановить вставку буквы 

    $('#txtAboutMe').keyup(function (e) {//note the added e to pass the event data
   var text = $(this).val();
   var textLength = text.length;`enter code here`
   if (text.length > maxLength) {
       $(this).val(text.substring(0, (maxLength)));
       alert("Sorry, you only " + maxLength + " characters are allowed");
       e.preventDefault();
       return;
   }
   else {
       //alert("Required Min. 500 characters");
   }

    }); * 1 010 *

...