How to implement this keyboard hooking function in javascript/jquery?
<p>I need to implement a keyboard for my language. For example, I want that if you type <code>"a"</code> then in the textbox or input box will show: <img src="http://cl.cooltext.com/rendered/cooltext530153213.png" alt="ka">.....If i press "m" it will show: <img src="http://i.stack.imgur.com/5hL2n.png" alt="enter image description here"></p>

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

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

<hr>

<p>I am searching for a better idea than running <strong>substring</strong> method after keystroke...Please help.</p>
