あかつきのお宿

ボディガードってのは、まさに字の通り誰かさんのボディをガードするのが役目なんですが、僕みたいな非力なピーナッツ野郎にはとてもそんな仕事は務まらないので、今日のところはかわりに、テキストボックスにフォーカスが当たってるときのエンターキー押下によるsubmitをガードしたいと思います。

めんどい前置き

お問い合わせフォームとかには、たいていテキストボックスがありますよね。名前とかメールアドレスを入力するところ。

このブログにも個別記事のところにコメントを入力するところがありますね。お名前とURLを入力するところはテキストボックスになっちょります。

通常なら、一通り項目を入力した後に「コメントを送信」のボタンを押せばコメントが投稿されるわけなんですけど、テキストボックスのところ、つまりお名前やURLの入力欄にフォーカスが当たっている状態でエンターキーを押すと、送信ボタンと押したときと同じ処理が行われます。

基本的にはブラウザの仕様で、テキストボックスにフォーカス時、エンターキーを押せばsubmitされるようになってるみたいです。ブラウザによって違いはあるかもしれないけど。

でも例えば、送信ボタンを押した時にjavascriptで何かしらの処理をしている場合なんかは、フォーカス時のエンターでsubmitしてしまうと、その処理が行われない。

そいつぁ嫌だよ困っちゃうよエンターイヤーだよってことで、じゃあどうしましょって話なんですけど、まあ、解決方法はエンターキーを押してもsubmitされないようにすれば良いわけですね。ふつーだね。

javascriptで制御する

いつものようにjQueryを使ってるって前提で書きますけど、javascriptには何かしらキーが押されたときのイベントを取得することができるので、それでエンターキーが押されたときの処理を書くことができます。

<script>
$(function(){
    $('input:text').bind('keydown keypress', function(e){
        if(e.keyCode == 13) {
            return false;
        }
    });
});
</script>

たぶんkeypressだけでも大丈夫のような気がするんですけど……一応念のため。

キーボードのキーにはそれぞれキーコードってやつが振られていて、エンターキーは13らしいです。なので、キーコードが13のときだけfalseを返すようにすればオッケー。

ちなみに、こちらにキーコードの一覧を作ってくれた方がいますが、キーコードはブラウザによって微妙に違っているみたいですね。エンターはどのブラウザでも13のようですが。



とまあ、こんな感じです。

たいした問題ではないんですけど、前置きでも言ったみたいにsubmit時にjavascirptの処理が入っていたら、場合によってはこれやっとかないと変なエラーが出たりしてしまうこともありますね。

検証用として、うちのコメントのところにもこの処理を入れてみました。

別にsubmit時にjavascriptの処理とかは入ってないけど、ほら、名前とか全角で入力してて、うっかりエンターを連打をしちゃうと、コメントが未入力ですっていうエラー画面に飛ばされちゃうからね。それの防止にはなるかな。