jQuery文本区域最大长度验证答案

【问题标题】：jQuery text area max length validationjQuery文本区域最大长度验证
【发布时间】：2011-07-29 18:36:26
【问题描述】：

我的以下代码运行良好，但问题是超过 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");
           }
       });"

【问题讨论】：

我一直以为只有输入类型才能接受最大长度？
@JonH，这就是为什么他想为 textarea 做这件事
能贴出相关的HTML吗？
@Amir 但是搜索stackoverflow有很多jquery解决方案。
是的，你是对的 textarea 只是一个输入类型

标签： jquery textarea maxlength

【解决方案1】：

你不应该在keyup 上这样做。请改用keypress。问题出在keyup 上，该字符已被触发并写入 textarea。这是一个很好的tutorial。注意按键事件。

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

});

【讨论】：

keydown 有效，但有什么方法可以概括上述方法，以便我可以将它用于多个文本框
@Tan，发布了可用于所有浏览器的内容。请注意，仅允许取消按键操作，并且 keydown 不起作用。希望这有帮助。查看教程以获得更多帮助。
这很好，但“13”不应该是忽略的关键。这允许您输入无限数量的回车。我希望“最大长度”包括回车/换行。

【解决方案2】：

您可以尝试定义一个用于比较的 maxLength（如果未定义等于未定义并且每个数字都大于未定义：这就是我认为您永远不会收到警报的原因）：

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

【讨论】：

这不是一个很好的解决方案，因为某些浏览器上的$(this).val(...) 会移动光标。

【解决方案3】：

解决办法有两个：

在插入字母之前使用 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");
   }

});

【讨论】：