JavaScriptでtextareaのキーボード入力イベントをハンドリングする方法2011年版

さくら — Wed, 02 Feb 2011 17:04:23 +0000

JavaScript プログラマなら、textarea のキーボード入力イベントのハンドリングで一度は苦労したんじゃないかと思います。かく言う私も何度も苦労させられてまっすw

で、JavaScript で textarea のキーボード入力イベントを補足する場合、onblur onfocus onchange onkeyup イベントハンドラで行うのが一般的だと思っていたのですが、mozilla（firefox 等）の場合 onkeyup の代わりに onpaste oninput をハンドリングするのが良いようです。

ちーと例示がめんどくさいので jQuery 使ってサンプルコードを書きますとこんな感じになります。

var events = 'blur focus change ' +
($.browser.mozilla ? 'paste input' : 'keyup');
$('textarea').bind(events, function() {
// イベントハンドラ
});

これで textarea にキーボード入力が発生したり、マウスで focus/blur したりといった、ユーザーからの I/O はだいたい補足できると思います。

ちなみに onpaste は Mozilla のイベントで、oninput は HTML5 のイベントのようです。

んーっと、上のコード Twitter の JavaScript を参考にしたんですが、onpaste が Firefox3 以降なので Firefox2 以下だと textarea が更新されてから change がイベントされないとトリガできないような気もしますが…
まーえーかww

さくらたんどっとびーず » textarea

JavaScriptでtextareaのキーボード入力イベントをハンドリングする方法2011年版