文本区域最大长度不起作用答案

【问题标题】：Text Area maxlength not working文本区域最大长度不起作用
【发布时间】：2010-08-16 08:28:10
【问题描述】：

我想设置文本区域的最大长度。我正在使用以下代码，但它不起作用，

<textarea name="txtDescription" cols=10 rows=3 maxlength=50></textarea>

但它不起作用，它需要超过 50 个字符。

【问题讨论】：

How to impose maxlength on textArea in HTML , Javascript 的可能重复项

标签： html

【解决方案1】：

没有为textarea 定义maxlength 属性。你需要implement这个using javascript。

【讨论】：

你自己的“实现”链接说它支持 HTML5。
@AminAriana 现在是，创建和接受此答案时不是。

【解决方案2】：

是的 maxlength 在 textarea 中不起作用。但是你可以像这样使用 jQuery：

var $limitNum = 500;
$('textarea[name="textarea_name"]').keydown(function() {
    var $this = $(this);

    if ($this.val().length > $limitNum) {
        $this.val($this.val().substring(0, $limitNum));
    }
});

【讨论】：

【解决方案3】：

我在 textarea 中尝试了 maxlength，但没有正确计算字符数（也计算 EOL）。我使用max_length 属性而不是普通的maxlength。

HTML：

<textarea name="whatever" max_length="100"></textarea>

JS：

$('textarea').keyup(function(){
  var maxlength = parseInt($(this).attr('max_length')),
      text = $(this).val(),
      eol = text.match(/(\r\n|\n|\r)/g),
      count_eol = $.isArray(eol) ? eol.length : 0,//error if eol is null
      count_chars = text.length - count_eol;
  if (maxlength && count_chars > maxlength)
    $(this).val(text.substring(0, maxlength + count_eol));
});

【讨论】：

【解决方案4】：

当 Darin Dimitrov 的答案在 2010 年发布时，maxlength 属性显然没有实现。

没错，2018 年，就是这样。

来源

caniuse
MDN

示例

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <label for="without">Without maxlength</label>
  <textarea id="without" class="form-control"></textarea>
  <br>
  <label for="with">With maxlength="10"</label>
  <textarea id="with" maxlength="10" class="form-control"></textarea>
</div>

【讨论】：

但是你看到它不能正常工作，如果你换行你会得到 value.length
@Vano 我使用的是 Chrome，但我不能输入超过 10 个换行符，或者例如 5 个换行符和 5 个字符（我假设您的意思是按 Enter 键？）
是的，当您按 Enter 键时会出现问题，在 Chrome 中它可以正常工作，但在 Safari 上却不行。所以基本上如果你限制 textarea 假设 maxLength=100 并且你按 Enter 5 次，当你达到最大限制时 - 你最终会得到 textarea value.length === 95。
@Vano 我明白你的意思。如果您想防止这种情况发生，请查看this answer。这是 JavaScript 的一个“问题”，但可以解决。

【解决方案5】：

以上答案对于早期版本的 IE 10 是正确的。

如果您对 maxlength 属性有疑问，我的建议是先检查您的浏览器版本。 maxlength 属性是 HTML5 中标签的新属性。在 IE 10+ 或 Chrome 上应该没问题。

【讨论】：

【解决方案6】：

textarea 的 Maxlength 属性在 Chrome 中有效。

【讨论】：

【解决方案7】：

你可以使用

<textarea name="testString" onkeypress="if (this.value.length >= 250) { return false; }"id="" cols="30" rows="10" maxlength="250"></textarea>

【讨论】：

【解决方案8】：

你需要像这样把它放到HTML标签中，确保你有空引号“”。

&lt;textarea maxlength="5"&gt;&lt;/textarea&gt;

【讨论】：

【解决方案9】：

这适用于 Ruby on Rails：

:maxlength => "10"

代码示例：

<%= text_area 'order', 'special_instructions_display', :size => "85x7", :maxlength => "10"  %>

【讨论】：

【解决方案10】：

请参考jquery

<script type="text/javascript">  
$().ready(function(){   

     $("#textareaId").attr('maxlength','20');   

 });
</script>

【讨论】：

SCRIPT438：对象不支持属性或方法“maxLength”