Question

I’ve got an online typing program and I want to create an on-screen keyboard for them, rather like how they do it in typing programs, such as Keyblaze Typing Tutor. So is there a way to create a JavaScript program which will display the keys (the presentation aesthetics don’t matter) which are currently being typed by the user?

Answer 1

Try extending this example

jQuery:

$(function () {
  $("#input").keydown(function (event) {
      $("#" + String.fromCharCode(event.which)).addClass("trigger");
  }).keyup(function (event) {
      $("#" + String.fromCharCode(event.which)).removeClass("trigger");
  });
});​

You can create a keyboard using pure HTML and CSS. See this beautiful example