Tricks to implementing a character count field when using KeymanWeb

A common technique in web forms is to show a character count a-la Twitter to let the user know how many characters they have left before the field is full to the brim.

Many examples online show how to update this counter with an onkeydown and/or an onkeyup event attached to the control, for example:

<textarea id="ta" onkeydown="updateCharCount(this)" onkeyup="updateCharCount(this)"></textarea>

When KeymanWeb is added to the site, you will often find that these methods no longer work.  This is because KeymanWeb takes over the onkeydown and onkeyup events (as well as onkeypress) in order to manage all input to the control.  However, there is a simple workaround.  Instead of using the legacy event model as illustrated above, use the more modern addEventListener (and for Internet Explorer 6-8, attachEvent) functions, viz:

var ta = document.getElementById('ta');
if(document.addEventListener) {
  ta.addEventListener(
    'keyup',
    function() { updateCharCount(ta) },
    false);
}
else if(document.attachEvent) {
  document.getElementById('ta').attachEvent(
    'onkeyup',
    function() { updateCharCount(ta); });
}

This code, while simplistic, shows you an approach which will work even when KeymanWeb is attached to the control, and what's more, will not interfere with KeymanWeb.  By attaching to onkeyup instead of onkeydown, the character count will be more closely in sync with the actual number of characters in the control.