Tutorial: Multiple Keyboards for Accented Characters

Entering accented or other “unusual” characters in a web-form is a recurring problem, which is usually solved by placing a virtual keyboard on the page. I find these annoying as they take up real estate on the page and are not used most of the time. Moreover, I needed more than 1 keyboard (e.g. for entering last name and first name). I came up with a form with the following characteristics:

  • At most one visible keyboard
  • Keyboard disappears when any textbox is clicked
  • As long as keyboard is visible, clicking on it will enter characters into the calling field

The HTML for the form

Last Name:
First Name:

The functions used in this html are hideblks(), which hides the keyboards and vis(), which makes a particular one visible:

The kb() function will be used below, in defining the action of each clicked key in the keyboard. Before that, we define some CSS:

which should of course be defined in the document's HEAD (or in a separate linked file).

Finally - here are the keyboards:



A complete example can be seen here, and the correspoding code is here: code

Leave a Comment

You must be logged in to post a comment.