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.

Text-field-character-count
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.

Categories: KeymanWebWeb/Tech

0 thoughts on “Tricks to implementing a character count field when using KeymanWeb”

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Using Keyman Desktop

A simple tool to create key images

This is just a short blog post to describe our in-house tool for creating key images, such as the ones shown below. How to use the key image generator Visit http://keyman.com/support/keytemplate.php Type the key sequence Read more…

Amharic

Products we will be discontinuing in March 2015

Earlier this month, we conducted an internal review of our product offerings and development status. As a result of this review, we determined that we would stop developing and distributing several products. This is important Read more…

Developing Keyboards

An Urdu keyboard layout, optimised for small touch devices

Test or install the Urdu Touch keyboard The recent availability of Google’s Noto Nastaliq Urdu Draft font has made it possible to render Urdu correctly (and beautifully!) on touch devices as well as on desktop Read more…