全角文字をテキスト入力したときに、確定していなくても値を取りたい

HTML,CSS,JAVASCRIPT,PHP,MYSQL等を使って、テキストエリアに入力した全角ひらがなを半角ローマ字に変換（あるいはその逆で、半角ローマ字を入力したら全角ひらがなに）して表示したいと考えています。その際、変換ボタン等を使わずに、テキストエリアに入力が始まったら即座に表示エリアに変換結果を表示したいです。

MYSQLのT_MOJI（文字テーブル）には、

hiragana roman
あ a
い i
う u
え e
お o

上記のようなデータが登録されており、テキストエリアに「あう」と入力されたら、「あ」→「a」、「う」→「u」を変換して、表示エリアに「au」と表示したいです。

全角ひらがな→半角ローマ字

【テキストエリア】あいうえお→【変換エリア】aiueo

半角ローマ字→全角ひらがな
【テキストエリア】yamamoto→【変換エリア】やまもと

JAVASCRIPT等を使い込んでいないので調べていたのですが、下記のURLを参照すると、丸々参考になるわけではないですが、半角文字についてはJQUERYを使って入力時にリアルタイムで入力桁計算ができるようなので、入力内容も取れそうな気がします。
http://black-flag.net/jquery/20120229-3696.html
ただ、全角文字については、テキストエリア内で文字を確定させれば桁数を取得できますが、確定するまでは取得できません。

どのあたりのキーワードで調べれば参考情報にたどり着けるのかわからず、困っているところです。

参考URLだけでも結構です。何かヒントになる情報をご存知の方がいらしたら、ぜひご教示ください。よろしくお願いいたします。