javascript - 使用 Prototype 事件观察器防止用户在文本区域中写入超过 N 个字符

Question

我知道可以使用以下技巧从 textarea 上的 input 元素模拟 maxlength 属性:

<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 事件中检查文本区域的长度并在超过限制时 trim 它的值来解决这个问题；但它不一样，因为用户会看到文本出现和消失。

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

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>