限制文本区域长度的最佳 JavaScript 解决方案是什么？答案

【问题标题】：What is the best JavaScript solution to limit the length of a textarea?限制文本区域长度的最佳 JavaScript 解决方案是什么？
【发布时间】：2010-10-13 20:35:08
【问题描述】：

是否有规范的解决方案来限制某人可以输入文本区域的字符数？

我当然有服务器端验证，但想通过添加客户端代码来模拟您在 input[type="text"] 上使用 maxlength 获得的体验来改善用户体验，这样用户就不会看到“您的输入太长”错误消息，如果他们启用了 javascript。

【问题讨论】：

标签： javascript html

【解决方案1】：

将 onchange 事件附加到 textarea。在那里您可以检查该值是否大于适当的值。 jQuery 示例：

$("#textarea-id").change(function (){
  var text = $(this).val();
  if( text.length > MAX ){
    return false;
  }
});

【讨论】：

Onchange 只会在您离开（模糊）文本区域后触发。
即使是 1 个字符太长也会中止整个更改？
无论如何，您都无法中止更改事件。
啊，必须的 jquery 响应

【解决方案2】：

这样就可以了……

function textareaMaxLen(event) {
  var max = parseInt(this.attr("maxlength"), 10);
  if(this.value.length >= max)
    this.value = this.value.substr(0, max);
}

$("textarea").keyup(textareaMaxLen).blur(textareaMaxLen);

【讨论】：

【解决方案3】：

我会这样做：

$ ('#textarea-id').bind (
  'change input keyup keydown keypress mouseup mousedown cut copy paste',
  function () { return ($(this).val().length <= maxlength) }
)

为了完全确定这么多 :-)

【讨论】：

不工作。当达到 char 限制时，无法再更改它。甚至没有删除。

【解决方案4】：

我的非技术性 $0.02

按照 SO 在他们的评论字段中执行的操作，提供有关用户剩余字符长度的反馈，并允许他们超过最大值，但不要提交 > 300 个字符。原因如下：

允许用户超过最大字符数允许他们完成一个想法。然后他们可以返回并编辑该想法。没有什么比句尾无法完成更糟糕的了。

为字符长度提供反馈使人们不必猜测它们的长度是多少。

【讨论】：

给你一个 +1 是一个艰难的决定，因为我在这里有自己的答案 :-) 但我发现你的理由对于这个话题非常有价值。

【解决方案5】：

过去我是这样做的：

<textarea onkeyup="checkLength(this);"></textarea>

然后实现这个函数：

function checkLength(control) {
            if (control.value.length > 5) {
                control.value = control.value.substr(0, 5);
            }
        }

这是一个将长度固定为 5 的非常基本的示例，但希望能给你一些想法！

【讨论】：

我不会给你-1，但我认为“keyup”还不够。例如，您可以在没有键盘事件的情况下粘贴文本。
使用 onchange 比使用 onkeyup 更好，因为 change 事件将捕获粘贴的文本和按住的键等内容。这样想，你对数据感兴趣，而不是用户如何操作它
好点 - 它仍然适用于 ctrl-V 的 keyup，但不适用于右键单击和粘贴。 onchange 也不是很好，因为它只在用户退出框时触发，这意味着他们最终会输入负载，只是看到它被清除回 5 个字符（或任何限制）。