IEでフォームのsubmitではまり
Ajaxでログイン画面とってきて、LightBoxみたいな感じで表示して入力させるログイン画面を作っていたんですが、IEだけテキストフィールド上でリターンキーを押下してもフォームが送信されない問題が発生。
とりあえずJavascriptでリターンキーが押下されたのをキャッチしてフォームを送信することに。ちなみにprototype.js使ってます。
<div id="ajaxLogin"> <form action="/login" method="post" onsubmit="new Ajax.Request(...); return false;"> <ul class="inputArea"> <li><input type="text" name="login_id" value="" /></li> <li><input type="password" name="password" value="" /></li> </ul> <p> <input type="image" src="/images/login.png" alt="submit" /> </p> </form> </div> <script type="text/javascript"> //<![CDATA[ if (Prototype.Browser.IE) { var submitForIE = function(e) { if (e.keyCode == Event.KEY_RETURN) { var event = document.createEventObject(); e.target.form.fireEvent('onsubmit', event); Event.stop(e); } }; $$('#ajaxLogin ul input').each(function(obj) { obj.observe('keypress', submitForIE, false); }); } //]]> </script>
試行錯誤した結果が上記。最初直接form.submit()ってやったら、onsubmit介さずにいったのでなんとかonsubmitを介すようにしようと思ったんだけど、prototype.jsのfireメソッドだとネイティブなイベントは呼び出せないようなので自前で実行。IE限定なので、document.createEventObject()でイベントつくってfireEventでイベントを実行。
とりあえずこれで動いているようです。jQueryならもっと楽にできたんだけどなあ。