JavaScriptのブラウザーによる動作の違い(onKey)
2007.08.01 Author: Jas
今日は珍しく、JavaScriptの話です。
JavaScriptを使用すると、クライアント(ブラウザ)側で処理を行うことができるので便利ですが、ブラウザによって動作が違うことがあるので厄介です。
ある案件で入力制御のJavaScriptを作成することになったのですが、InternetExplorerとFirefoxのonKeyに対する動作の違いで悩まされました。
onKeyupを使い、何か文字が入力されるたびにJavaScriptで処理をして、フォームの値に反映させようとしていたのですが、Ｆｉｒefoxではうまく作動するのにＩｎｔernetExplorerだと何度テストしてもうまくいきません。
何が起こっているのかわからないので、フォームから受け取った値と処理途中の値、処理後の値などをすべて表示できるようにしてみました。
すると、こんなことがわかりました。
- Firefoxでは日本語入力で変換が確定するまでJavaScriptにフォーム値が渡されていない。
- IｎｔernetExplorerではキーを押すたびに毎回JavaScriptにフォーム値が渡されている。
たとえば、「今日は」と入力する場合、Firefoxだと「きょうは」と打ち込み、変換をして、Enterで確定したときにのみJavaScriptにデータが渡されていました。それに対し、ＩｎｔernetExplorerでは同じ入力を行っても「k/y/o/u/h/a」の６回に加え、変換キーを押した回数と確定のEnterを押したときのすべてにおいて、JavaScriptにデータが渡されていました。
どうやら、ＩｎｔernetExplorerでのおかしな挙動は、このブラウザーによるJavaScript仕様の違いが原因のようです。そこで、Enterキーが押された時にだけJavaScriptの処理をかけてやるように書き換えてみると、ＩｎｔernetExplorerでもうまく作動するようになりました。
ただ、処理を行うのを「Enterキーが押された時にだけ」に限定してしまったので、Enterキーが押されなければ、処理がされずにチェックをすり抜けてしまう問題があります。
そこで、フォームをSUBMITする前にも一度すべての項目をチェックするようにしてみました。
これで一通りできあがったので、あとは動作チェックです。
うまく動くといいのですが・・・
【参考】JavaScriptのonKeyに対するブラウザ別の動作
