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

У меня есть следующий код, который работает хорошо, но проблема в том, что после превышения 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");
           }
       });"

jquery textarea maxlength
person Tan    schedule 29.07.2011    source источник
comment
Я всегда думал, что maxlength принимают только типы ввода?   -  person JonH    schedule 29.07.2011
comment
@JonH, вот почему он хочет сделать это для текстовой области   -  person Amir Raminfar    schedule 29.07.2011
comment
Можете ли вы опубликовать соответствующий HTML?   -  person Sparky    schedule 29.07.2011
comment
@Amir, но при поиске stackoverflow для этого есть множество решений jquery.   -  person JonH    schedule 29.07.2011
comment
да, вы правы, textarea - это только тип ввода   -  person Tan    schedule 29.07.2011
comment
возможный дубликат Как наложить maxlength на textArea в HTML, используя JavaScript   -  person JonH    schedule 29.07.2011
comment
Попробуйте следующее: [Это решение работает как собственная текстовая область HTML, свойство MAX-Length] [1] [1]: stackoverflow.com/questions/15031513/   -  person VoidA313    schedule 05.09.2014
comment
Попробуйте следующее: [Это решение работает как собственная текстовая область HTML, свойство MAX-Length] [1] [1]: stackoverflow.com/questions/15031513/   -  person VoidA313    schedule 05.09.2014

Ответы (3)


arrow_upward
6
arrow_downward

Вы можете попробовать определить 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");
           }
       });"
person Nicola Peluchetti    schedule 29.07.2011
comment
Это не лучшее решение, потому что $(this).val(...) в некоторых браузерах будет перемещать курсор. - person Amir Raminfar; 06.12.2012

arrow_upward
8
arrow_downward

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

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);
    });

});
person Amir Raminfar    schedule 29.07.2011
comment
keydown работал, но есть ли способ обобщить вышеуказанный метод, чтобы я мог использовать его для нескольких текстовых полей - person Tan; 29.07.2011
comment
@Tan, опубликовал что-то, что можно использовать во всех браузерах. Обратите внимание, что в опере можно отменить только нажатие клавиши, а нажатие клавиши не работает. Надеюсь, это помогло. Ознакомьтесь с руководством для получения дополнительной помощи. - person Amir Raminfar; 29.07.2011
comment
Это здорово, но 13 нельзя игнорировать. Это позволяет вам вводить бесконечное количество возвратов каретки. Я ожидаю, что максимальная длина включает возврат каретки/перевод строки. - person mhenry1384; 19.01.2013

arrow_upward
0
arrow_downward

Решение двоякое:

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

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

    $('#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");
   }

    });

person user2918522    schedule 25.10.2013