Real-time textarea input mirroring using html and javascript

[duran1]

I am creating English to Hindi transliteration webpage.Currently I have created two separate text areas (one where the user can type while the other is a read-only real-time text-area that will show the translated English word).I want to emulate like Google transliteration tool webpage. That is, on-the-fly output should appear somewhere near the word being typed in the same user textbox (no need of read-only area).Here is a demo of my application: http://jsfiddle.net/kBA5b/Also, I am creating this webpage such that it can work offline.Any suggestions on how to go about doing this?Thank you, for listening.