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?

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?

• javascript
• typing

• I've been looking online for things like jQuery on Screen Keyboard and similar plugins, but they only allow you to enter text into a textbox, they don't show anything when text is typed using the actual keyboard on your puter. – Zerium Commented Apr 6, 2012 at 10:15

2 Answers 2

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

You can find nice jQuery on Screen Keyboard Plugin on this site. Read the documentation too.

It looks like this...