Question

我知道可以通过使用此技巧模拟maxlength上input元素的textarea属性：

<textarea rows="5" cols="30" onkeydown="return checkLength(this)"></textarea>

<script type="text/javascript">
var maxLength = 30;

function checkLength(elem) {
  if (elem.value.length == maxLength) {
    return false;
  }
  return true;
}
</script>

通过使用checkLenght的返回值作为onkeydown事件的返回值，我能够有效地阻止用户写入超出配置的限制，因为事件链将在输入的字母出现之前被破坏。

我使用Prototype的事件观察器尝试了相同的技术，但它没有用。这是我尝试过的简化版本：

<textarea rows="5" cols="30" id="myTextArea"></textarea>

<script type="text/javascript">
var maxLength = 30;

function checkLength() {
  if ($('myTextArea').value.length == maxLength)) {
    return false;
  }
  return true;
}

document.observe('dom:loaded',function(){
  $('myTextArea').observe('keydown',checkLength);
});
</script>

显然，这不起作用，因为我不能通过返回false来破坏事件链（并且Event.stop()只会阻止此事件冒泡，而不是完全停止执行。）

我通过检查onkeyup事件上的textarea长度并在超出限制时修剪其值来解决此问题;但它不一样，因为用户会看到文字出现并消失。

有没有办法达到同样的效果？

Answer 1

考虑其他答案和评论。最好进行后期验证，不要接受帖子。

尽管如此，以下应该可以工作（它在FF和IE中，在Opera中它没有。不能打扰检查原因）

<textarea rows="5" cols="30" id="myTextArea"></textarea>
<script type="text/javascript">
    var maxLength = 30;
    Event.observe('myTextArea', 'keydown', function (event) {
        if ($('myTextArea').value.length == maxLength) {
            Event.stop(event);
            return false;
        }
    });
</script>

Answer 2

修剪不是一个好的解决方案，只需尝试这个就知道为什么

填写文本区域，然后转到中间部分并输入字符

这会产生一种可怕的效果：输入的字符被拍摄然后被拍摄，因此结束文字会丢失。

的maxlength = 21
值（长度= 21）：“这是什么类型” 然后在“What”之前键入：“Not” 你会得到：“这不是什么”

期望的效果是忽略新类型的字符，而不是丢弃结束文本。

在示例中它非常短...想象多线文本区...用户将继续在中间打字而不会看到结束被丢弃。

在带有maxlength的输入类型=“text”上尝试相同的示例，无论文本中的光标位于开头，中间还是结尾，都会看到当达到限制时忽略新的类型字符。

Answer 3

Event#stop表示{{1}}停止传播以及会阻止默认操作。它不起作用吗？

此外，将其绑定到keydown / keyup并不会阻止它们粘贴文本区域中的大量文本。

像乔尔在评论中所说的，阻止用户打字可能不是一个好主意。放置验证+警告要好得多（比如在Stackoverflow的注释字段中）。

Answer 4

使用setInterval定期检查textarea的状态，如果需要，可以修剪文本。

使用Prototype事件观察器阻止用户在textarea中写入超过N个字符

4 个答案: