リターン(Enterキー)でフォームを送信しない方法

リターン(Enterキー)でフォームを送信しない方法

Posted at January 20,2012 1:55 AM
Tag:[JavaScript, jQuery]

フォームのテキスト入力中にうっかりリターン(Enterキー)を押してしまい、中途半端なフォームが送信されてしまったという経験をした人は結構多いのではないかと思います。

ということで、リターン(Enterキー)でフォームを送信しないようにする方法を紹介します。この記事の投稿時点でのGoogle Chrome・Firefoxの最新版とIE9で同じ動作になることを確認しています。

1.リターンでフォームが送信される原因

次のように、type属性が「text」のinput要素、いわゆるテキストフィールドが含まれるフォームで、テキストフィールドがアクティブなときにリターンを押すとフォームが送信されてしまいます。

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <input type="submit" value="送信" />
</form>

または

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <button type="submit">送信</button>
</form>

type属性が「password」の場合も同様です。

2.送信ボタンを書き換える

送信ボタンを赤色のように、「type="button"」のinput要素またはbutton要素に書き換えることで、リターンによる送信を回避できます。

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <input type="button" onclick="submit();" value="送信" />
</form>

または

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <button type="button" onclick="submit();">送信</button>
</form>

つまり、type属性が「submit」のinput要素またはbutton要素を作らない、ということがポイントです。

onclick属性の部分をjQueryで書き直すと、次のようになります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
  $("input[type=button]").click(function(){
    $("form").submit();
  });
});
</script>
<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="bar" />
  <input type="button" value="送信" />
</form>

なお、フォームにテキストフィールドが1つしかない場合は次の対処も併せて行う必要があります。

3.テキストフィールドがフォームに1つしかない場合

次のように、テキストフィールド(またはパスワードフィールド)がフォームに1つしかない場合、2項の対処を行っても送信されてしまいます(下)。textareaや他のtype属性のinput要素が複数存在しても挙動は同じです。

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="button" onclick="submit();" value="送信" />
</form>

このような場合はダミーのテキストフィールドのinput要素を用意して、テキストフィールドが2つある状態にします。

<form action="hoge.cgi">
  <input type="text" name="foo" />
  <input type="text" name="dummy" style="display:none;">
  <input type="button" onclick="submit();" value="送信" />
</form>

4.押されたキーを判定して抑止する

3項まではtype属性が「submit」の要素を排除することで実現しましたが、ここでは押されたキーによって判定する方法を紹介します。

押されたキー(リターンは「13」)で判定するには次のようにします。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
  $("input[type=text]").keypress(function(ev) {
    if ((ev.which && ev.which === 13) ||
        (ev.keyCode && ev.keyCode === 13)) {
      return false;
    } else {
      return true;
    }
  });
});
</script>
<form action="hoge.cgi">
  <input type="text" name="foo" onkeypress="return entsub()" />
  <input type="submit" value="送信" />
</form>

この方法であればtype属性がsubmitのinput要素を使えるようです。

5.参考サイト

参考サイトは以下です。ありがとうございました。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)