HTMLでフォームをチマチマ組んでテストしていると、テキストボックス(input[type=text]要素)とかでついついエンターキー(改行キー)を押して、ムカッ！！！！！！とかしません？ するよね、絶対するよね？ 僕は自己嫌悪に陥って仕事を中断して帰りたくなる衝動に駆られます！
そこでググってjQueryのプラグイン探すなり、テック系の記事をコピペしたりしますよね。でも僕は探すより、自分で書く方が早いんですよ、結果的に。適当なjQueryプラグインなりを探してもそれの使い方を調べてたり、要らない機能があったりして、結局ドキュメントをよく読まないとわからないことが多い。
要は FORM要素内のINPUT要素に onkeyup onkeydownイベントハンドラを仕込んでエンターキーをトラップすれば済む話。
たかだか数十行のスクリプトです。え？自分で組むとバグが！！！って？ バグが出たらその都度直せばいいんです。ラクしちゃいけません。ラクするのはチラシの印刷だけでよろしい。
僕は jQuery 好き好き人間なので、適当にプラグインを書きました。
で、これを以下のようなフォームで使うと、このままでは失敗して、エンターキー押すとフォームが送信されてしまいます。
失敗の原因は、FORM要素内に input[type=submit]要素が存在するのが原因。
chromiumしか確認していないけど、どうやら input[type=submit]要素が存在すると、エンターキー押下で問答無用でFORMのアクションが走るようです。このinput[type=submit]要素を消すと送信されない、という挙動になってます。違ったらごめん。
※ FORM要素内にinput[type=”text”]要素が一つしかない場合は、やっぱり問答無用でFORMのアクションが走るみたいです。嘘情報申し訳ない。上記はinput[type=”text”]が二つ以上ある場合のようです。一つしかないFORMの場合はダミーのinput[type=”text”]をどこかに配置して display: none; とかしとけばいいみたい。よく分からん仕様だなぁ。。。
じゃぁ、FORM要素にinput[type=button]要素なりa要素なりを書いて、そのonclickイベントハンドラ内で FORM要素のsubmitメソッドをコールすればいいんじゃない？ということになるんですが、残念ながらそうは問屋は降ろさない。
input[type=submit]要素がないと、FORM要素のvalidityチェックが走らないんだな、これが。せっかくinput要素に requireだのpatternだのを書いても無視されてしまう。
解決方法は２つ。
（１）
input[type=button]要素のonclickハンドラ内で、FORM要素のsubmitメソッドをコールする前に、reportValidityというメソッドをコールしてその返り値を判断して submitメソッドをコールするかどうかを決定する。
<script type="text/javascript"><!--
(function($) {
$('form').enterNext();
$('form [type=button]').click(function(ev) {
if(this.form.reportValidity())
this.form.submit();
});
})(jQuery);
//--></script>
（２）
input[type=submit]要素を隠すか非表示(display: none;とか)にしておき、input[type=button]要素のonclickハンドラとFORM要素のonsubmitイベントハンドラを仕込んでおいてエンターキー押下かではなくクリックされたかをチェックさせる。
<form>
....
<input type="submit" style="display:none;" />
<input type="button" value="送信" />
</form>
<script type="text/javascript"><!--
(function($) {
$('form').enterNext();
$('form').submit(function(ev) {
if(!'isClick' in this || this.isClick !== true)
{
ev.preventDefault();
return false;
}
});
$('form [type=button]').click(function(ev) {
$('form').prop('isClick',true).find('[type=submit]').click();
});
})(jQuery);
//--></script>
最初（２）の方を使ってたんだけど、（１）の方がカンタンなので、そっちにした。単に reportValidityというメソッドを後から知ったんだけどね💦
ちなみに、FORMのvalidityチェックの際、エラーメッセージをカスタマイズするプラグインもついで書いた。プラグインにするほどのものでもないけど、一回一回書くのはめんどっちーのでプラグインにした方がラク、というだけの理由ですけどね。
