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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Developing Keyman

Keyman 11.0 is now available

We have just released Keyman 11.0 for Windows, macOS, Linux, Android, iOS and web, as well as Keyman Developer, the keyboard development suite. Keyman for Linux is entirely new for version 11. For the other Read more…

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…