こんにちは、しきゆらです。
急に暑くなってきた今日この頃、いかがお過ごしでしょうか。
今回は、HTMLのお話です。
HTMLのformタグで、エンターを押した時に送信したい、という場面になりました。
しかも、送信する部分に関してはJSでコードを書いていました。
例としては、以下のような感じ。
<form>
<label for="user_id">ユーザID：</label>
<input type="text" id="user_id" name="user_id">
<button type="button" onclick="login()">ログイン</button>
</form>
ユーザ名IDを入力してもらい、ボタンを押すと入力された情報をサーバへ送りログイン処理を行う、というもの。
これを、エンターを押した時も同じように処理してほしい、というのが今回の話。
サーバサイドのスクリプトも自分で書いていたので、HTMLのsubmitに合わせてデータを取得できるようにすればいいんですが、面倒だったのでlogin関数でなんとかできないかな、と思っていました。
結論としては、formタグに「onsubmit="return login();"」と書き込んで、
login関数で 「return false;」とすれば解決でした。
<form onsubmit="return login();">
<label for="user_id">ユーザID：</label>
<input type="text" id="user_id" name="user_id">
<button type="button" onclick="login()">ログイン</button>
</form>
function login(){
// なんらかの処理
return false;
}onsubmitは、onclickのように関数名を渡せばいいんだと思っていましたが、違うようですね。
onsubmitは、関数等の処理を返す必要があるようです。
ただ関数がreturnすればいいのではなく、その値をさらにリターンするイメージですかね。
参考：onsubmitの戻り値をfalseにしてsubmitを実行しない（中断させる）方法 – 小粋空間
また、テキストボックスの数によっても挙動が異なるようです。
参考：【HTML】入力欄が1つだけのフォームはEnterキー押下でsubmitされる。submitボタンがなくても。 – SOFTELメモ
知らないことがたくさんありますね。
今回はここまで。
おわり。