How to implement this keyboard hooking function in javascript/jquery?

Question

I need to implement a keyboard for my language. For example, I want that if you type "a" then in the textbox or input box will show: ka http://cl.cooltext.com/rendered/cooltext530153213.png.....If i press "m" it will show:

Now, this is not possible in current webbrowsers because there is no hooking functionality here. For this,I have decided that this algorithm:

1. Detect keycode of the typed letter (in this case "a")
2. Maintain a keymap and found from the keycode (in step1) which key will be replaced by "a"
3. Replace the textarea/textInput as: "string before --a--"+ replaced key from step2 + "rest of the portion after --a--"
4. return false so that "a" is not written into the textarea/textInput by the browser.

---

I am searching for a better idea than running substring method after keystroke...Please help.

Answer 1

Your algorithm is exactly the correct way to implement this.

Answer 2

I've provided code to do just this on Stack Overflow before: show different keyboard character from the typed one in google chrome and Can I conditionally change the character entered into an input on keypress?, for example.