HTMLでフォームをチマチマ組んでテストしていると、テキストボックス(input[type=text]要素)とかでついついエンターキー(改行キー)を押して、ムカッ！！！！！！とかしません？ するよね、絶対するよね？ 僕は自己嫌悪に陥って仕事を中断して帰りたくなる衝動に駆られます！
そこでググってjQueryのプラグイン探すなり、テック系の記事をコピペしたりしますよね。でも僕は探すより、自分で書く方が早いんですよ、結果的に。適当なjQueryプラグインなりを探してもそれの使い方を調べてたり、要らない機能があったりして、結局ドキュメントをよく読まないとわからないことが多い。
要は FORM要素内のINPUT要素に onkeyupイベントハンドラを仕込んでエンターキーをトラップすれば済む話。
たかだか数十行のスクリプトです。え？自分で組むとバグが！！！って？ バグが出たらその都度直せばいいんです。ラクしちゃいけません。ラクするのはチラシの印刷だけでよろしい。
僕は jQuery 好き好き人間なので、適当にプラグインを書きました。
/********************************************************************
filename: jquery.enterNext.js
usage: call bellow...
$('form').enterNext();
********************************************************************/
(function($,undefined)
{
$.enterNext =
{
config:
{
selectors: [
'input[type="text"]',
'input[type="password"]',
'input[type="email"]',
'input[type="number"]',
'select',
'textarea'
]
}
};
var enterNextInternal = function(setting)
{
var selectors = setting.selectors.join(',');
var $controls = $(selectors,this);
var lastIndex = $controls.length - 1;
var onKeyUp = function(ev)
{
if(this.tagName.match(/input/i) && ev.keyCode == 13)
{
var currentIndex = $controls.index(this);
var nextIndex = currentIndex + 1;
if(currentIndex == lastIndex)
nextIndex = 0;
var nextObject = $controls.get(nextIndex);
nextObject.focus();
}
};
$(this).on('keyup',selectors,onKeyUp);
};
$.fn.enterNext = function(options)
{
return this.each( function() { enterNextInternal.call(this,$.extend(true,{},$.enterNext.config,options)); });
};
})(jQuery);
で、これを以下のようなフォームで使うと、このままでは失敗して、エンターキー押すとフォームが送信されてしまいます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css"><!--
form input[type=text] {
display: block;
margin: 1em 0;
padding: 5px;
}
--></style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.enternext.js"></script>
</head>
<body>
<div id="main">
<!--メインコンテンツ-->
<div id="contents">
<div class="inner">
<form method="post">
<input type="text" name="a" value="" required />
<input type="text" name="b" value="" />
<input type="text" name="c" value="" />
<input type="text" name="d" value="" />
<input type="text" name="e" value="" />
<input type="submit" value="送信">
</form>
</div>
</div>
</div><!-- #main -->
<script type="text/javascript"><!--
(function($) {
$('form').enterNext();
})(jQuery);
//--></script>
</body>
</html>
失敗の原因は、FORM要素内に input[type=submit]要素が存在するのが原因。
chromiumしか確認していないけど、どうやら input[type=submit]要素が存在すると、エンターキー押下で問答無用でFORMのアクションが走るようです。このinput[type=submit]要素を消すと送信されない、という挙動になってます。違ったらごめん。
じゃぁ、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チェックの際、エラーメッセージをカスタマイズするプラグインもついで書いた。プラグインにするほどのものでもないけど、一回一回書くのはめんどっちーのでプラグインにした方がラク、というだけの理由ですけどね。
/******************************************************************
Filename: jquery.validity.js
入力必須の際のエラーメッセージをカスタマイズします。
usage:
<input type="text" pattern="^[0-9]*$" name="hogehoge" />
$('input[type=text]').validity('半角数字で入力してください');
*******************************************************************/
;
(function($,undefined)
{
//デフォルト値
$.validityMessage = 'この項目は入力必須です。';
var validity = function(message)
{
if(message.length == 0)
message = $.validityMessage;
$(this)
.on('invalid',function(ev) {
if(this.validity.valueMissing || this.validity.patternMismatch || this.validity.typeMismatch)
{
this.setCustomValidity(message);
}
else
{
this.setCustomValidity('');
ev.preventDefault();
}
})
.on('input',function(ev) {
this.setCustomValidity('');
});
};
//plugin body
$.fn.validity = function(message)
{
return this.each(function()
{
validity.call(this,message);
});
};
})(jQuery);
