テキストinputでEnter押下時に無理やりSubmitさせる方法
テキストフィールドで入力終了後にEnterキーを押してSubmitされない時はありませんか？
逆にEnterキーを押してSubmitさせたくないといったページが多かったので「Submitさせたい！」側のページも書いておこうと思い、小ネタですが投稿させて頂きます。
ちなみにしばらくお休みしていた当ドドドのフリーランスエンジニアですが、気を引き締めなおして週1〜2のゆるいペースで引き続き初心者が困りそうなシステムの話題や個人的に気になっていることなどをつれづれなるままに書きたいと思っていますので、引き続きよろしくお願いします╭( ･ㅂ･)و ̑̑ ｸﾞｯ !
プログラミングやWordPressを習得するのに一番近道な方法とは？
目次
そもそもなぜEnterでSubmitされる時とされない時があるのか
なぜこの違いが出てくるのか。
これはW3Cの4.10.22.2 Implicit submissionの規定に各ブラウザが対応しているからだと思います。
私Peiは英語はとんとダメでございまして、Googleの翻訳コンニャクを待ちに待っている人間なのですが、まあざっくり言うと暗黙のsubmit（EnterキーでSubmit）されるのを阻止する項目が１つでもあればSubmitされないよ、みたいなことだと思います。
その阻止する項目はいまいち私の英語力じゃ良く分かりませんが、要するに暗黙のsubmitが効かない時がある！ということです。
全然解決されてないですね…汗
無理やりEnterキーでSubmitさせる方法
能書きはこれまでにして無理やりEnterキーでSubmitさせるべく、コードを載せていきましょう。
HTML
| 1 2 3 4 | <form name="formname" action="test.php"> <input type="text" name="mid" onkeydown="go();"> <input type="submit" name="search" value="検索"> </form> |
JavaScript
| 1 2 3 4 | function go(){ //EnterキーならSubmit if(window.event.keyCode==13)document.formname.submit(); } |
JavaScriptで制御します。EnterキーはKeyCodeが13なのでonkeydownでEnterが押されたらフォームをSubmitしろという簡単な命令ですね。
無理やりEnterキーでSubmitさせない方法
ちなみにですが、逆にSubmitさせない方も載せておきます。
HTML
| 1 2 3 4 | <form name="formname" action="test.php"> <input type="text" name="mid" onkeydown="go();"> <input type="submit" name="search" value="検索"> </form> |
JavaScript
| 1 2 3 4 | function go(){ //Enterキーなら何もしない if(window.event.keyCode==13)return false; } |
今度はEnterキーが押されたら何もしない…という命令です。
簡単ですね。
まとめ
すごい小ネタ且つそんなこと知ってるよ的で需要ナッシングかもしれないですけど、この間あれ？Submit出来ないぞ？って時にググってしまったので、同じような方がもしいてお役に立てれば嬉しいです。
それでは！
