IEでsubmitボタンにdisplay:noneを指定するとEnterが効かない

投稿日：

jQuery UIのダイアログを使ってログインダイアログを実装したときに、ユーザー名とパスワードを入れてEnterでログイン処理（formのsubmit）をしたい。

image

jQuery UIのdialogのオプションではbuttonsにtype属性を指定できないようなので、最初は

<input type="submit" style="display:none" />

をform内に追記。

これがFirefoxでは動くけど、IEではdisplay:noneにするとEnterキーでsubmitできない。ならばと次のように変更してみた。

<div style="width:0; height:0; overflow:hidden;">
    <input type="submit"  />
</div>

これで大丈夫かなと思ったけど、やっぱり出来ない。

次のは見えないスタイルにする。でもこれはtab移動してしまうので嫌。

<input type="submit" style="width:0;height:0;overflow:hidden;border:none;background-color:white;" />

onkeydownやonkeypressを使ってjavascriptでsubmitするのはめんどくさいので嫌。

最終的にはダイアログのbuttonsを使うのをやめて、直書きするようにした。サンプルコード

<a id="toolbar-login" href="#">ログイン</a>
<form id="login-form" name="login-form" action="<?php echo site_url( 'wp-login.php' ) ?>" method="post">
	<div>
		<label for="user_login">ログインID</label>
		<input type="text" name="log" id="user_login" class="text" value="" />
	</div>
	<div>
		<label for="user_pass">パスワード</label>
		<input type="password" name="pwd" id="user_pass" class="text" value="" />
	</div>

	<div style="text-align:right;margin-top:5px;padding-top:5px;border-top:1px solid #AAAAAA;">
		<input type="submit" id="login-submit" value="ログイン"/>
		<input type="button" id="login-cancel" value="キャンセル"/>
	</div>
</form>
<script type="text/javascript">
	jQuery(function() {
		jQuery("#login-form").dialog({
		  title: "ログイン",
		  autoOpen: false,
		  height: 220,
		  width: 360,
		  modal: true
		});
		jQuery("#login-submit").button();
		jQuery("#login-cancel").button().click(function(){jQuery('#login-form').dialog('close');});
		jQuery('#toolbar-login').button().click(function(){jQuery('#login-form').dialog('open');jQuery('#user_login').focus();});
	});
</script>

ちなみにIEはform内に<input type="text"/>が一つだとEnterキーが効かないというのもあるらしい。