如何使用 JavaScript 在 HTML 中的 textArea 上施加 maxlength

Question

我想有一些功能，如果我写

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

它会自动将最大长度强加在 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”属性的最佳方法是什么？

但关键是我不想在每次声明 textArea 时都写 onKeyPress 和 onKeyUp。

原文由 Rakesh Juyal 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

}

原文由 Josh Stodola 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

2022 更新

您可以使用属性 maxLength 设置“maxlength”的 HTML 属性（注意大写 L）。如果您尝试使用 maxlength （全部小写）并且它不起作用，您可能最终会出现在此页面上。

 textareaElement1.maxLength = 50;
textareaElement2.maxLength = 150;
textareaElement3.maxLength = 250;

如果您想以编程方式对所有现有文本区域执行此操作，则可以迭代 getElementsByTagName 结果：

 const textAreas = document.getElementsByTagName('textarea');
for (const element of textAreas) {
    element.maxLength = 150;
}

原文由 Darren S 发布，翻译遵循 CC BY-SA 4.0 许可协议