title: Prevent user from writing more than N characters in a textarea using Prototype event observers
body: <p>I am aware that it's possible to emulate the <code>maxlength</code> property from <code>input</code> elements on a <code>textarea</code> by using this trick:</p>
  
  <pre><code>&lt;textarea rows="5" cols="30" onkeydown="return checkLength(this)"&gt;&lt;/textarea&gt;
  
  &lt;script type="text/javascript"&gt;
  var maxLength = 30;
  
  function checkLength(elem) {
    if (elem.value.length == maxLength) {
      return false;
    }
    return true;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>By using checkLenght's return value as the return value for the <code>onkeydown</code> event, I'm able to effectively prevent the user from writing beyond the configured limit, as the event chain will be broken before the inputted letter appears.</p>
  
  <p>I've tried the same technique using Prototype's event observers, but it didn't work. Here's a simplified version of what I tried:</p>
  
  <pre><code>&lt;textarea rows="5" cols="30" id="myTextArea"&gt;&lt;/textarea&gt;
  
  &lt;script type="text/javascript"&gt;
  var maxLength = 30;
  
  function checkLength() {
    if ($('myTextArea').value.length == maxLength)) {
      return false;
    }
    return true;
  }
  
  document.observe('dom:loaded',function(){
    $('myTextArea').observe('keydown',checkLength);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Apparently, this won't work because I can't break the event chain by returning false (and <code>Event.stop()</code> will only prevent this event from bubbling up, not stopping execution altogether).</p>
  
  <p>I've workarounded this problem by checking the textarea's length on the <code>onkeyup</code> event and trimming its value if the limit is exceeded; but it isn't the same, as the user will see text appearing and disappearing.</p>
  
  <p>Is there a way to achieve the same result?</p>