如何使用JavaScript在HTML中对textArea施加最大长度

javascript html textarea

2022-08-30 05:09:39

我希望有一些功能，如果我写

<textarea maxlength="50"></textarea>
<textarea maxlength="150"></textarea>
<textarea maxlength="250"></textarea>

它将自动对文本区域施加最大长度。如果可能的话，请不要在jQuery中提供解决方案。

注意：如果我做这样的事情，这可以完成：

<textarea onkeypress="return imposeMaxLength(event, this, 110);" rows="4" cols="50">

function imposeMaxLength(Event, Object, MaxLen)
{
    return (Object.value.length <= MaxLen)||(Event.keyCode == 8 ||Event.keyCode==46||(Event.keyCode>=35&&Event.keyCode<=40))
}

从复制在 HTML 文本区域上模拟 HTML 输入 “maxlength” 属性的最佳方法是什么？

但关键是我不想每次声明文本区域时都写在KeyPress和onKeyUp上。

答案 1

window.onload = function() { 
  var txts = document.getElementsByTagName('TEXTAREA'); 

  for(var i = 0, l = txts.length; i < l; i++) {
    if(/^[0-9]+$/.test(txts[i].getAttribute("maxlength"))) { 
      var func = function() { 
        var len = parseInt(this.getAttribute("maxlength"), 10); 

        if(this.value.length > len) { 
          alert('Maximum length exceeded: ' + len); 
          this.value = this.value.substr(0, len); 
          return false; 
        } 
      }

      txts[i].onkeyup = func;
      txts[i].onblur = func;
    } 
  };

}

答案 2

我知道你想避免jQuery，但是由于解决方案需要JavaScript，这个解决方案（使用jQuery 1.4）是最一致和最健壮的。

灵感来自Dana Woodman的答案，但比Dana Woodman的答案有所改进：

与该答案相比的变化是：简化且更通用，使用 jQuery.live，如果长度正常，也不设置val（导致IE中的工作箭头键，以及IE中显着的加速）：

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').live('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});

编辑：jQuery 1.7 +的更新版本，使用而不是onlive

// Get all textareas that have a "maxlength" property. Now, and when later adding HTML using jQuery-scripting:
$('textarea[maxlength]').on('keyup blur', function() {
    // Store the maxlength and value of the field.
    var maxlength = $(this).attr('maxlength');
    var val = $(this).val();

    // Trim the field if it has content over the maxlength.
    if (val.length > maxlength) {
        $(this).val(val.slice(0, maxlength));
    }
});