テキストボックスのonchangeイベントを信用するべからず
はじめに
JavaScriptで、テキストボックスのonchangeイベントを信用してはならない。本エントリでは、今回私が経験した、期待とは異なる動作を紹介し、対処方法を提案する。
期待しない動作1：オートコンプリートでの入力時に発生しない
確認ブラウザ*3
- Win XP SP3上のInternet Explorer 6
- Win XP SP3上のFirefox 3.6.3
詳細
T/O。オートコンプリートでの入力時には、onchangeイベントが発生しない。
このあたり［MSDN］に記述があるそうだ。参照先ページでは、onpropertychange［MSDN］なるイベントの使用を推奨している。しかしこれは、IE限定だと思われるため、よほどIE限定で良いJavaScript以外では使うべきでないだろう。
期待しない動作2：変更してなくても発生する
確認ブラウザ
- Win XP SP3上のSafari 4.0.4
対処方法
上のとおり、onchangeイベントは信用ならない。従って、別の方法を考える。例えば次のような方法が考えられる。
- 当該テキストボックスのonfocusイベントをハンドル
- onfocusイベントハンドラ内で、当該テキストボックスの現在値を、変更前の値として、当該テキストボックス自身に記録*4
- 当該テキストボックスのonblurイベントをハンドル
- onblurイベントハンドラ内で、当該テキストボックスの現在値と、onfocusイベントハンドラ内で記録した変更前の値を比較し、値が異なったらonchangeイベントの期待動作相当と見なす
サンプルコード（YUI 2を使用）
function init(textBoxId) {
YAHOO.util.Event.addListener(textBoxId, "focus", function() {
this._oldValue = this.value;
});
YAHOO.util.Event.addListener(textBoxId, "blur", function() {
if (this.value != this._oldValue) {
// onchange の期待動作相当
}
});
}
