Enterキーを打ってもsubmit（送信）しないようにするには

2004.11.06新規作成。

HTMLフォームで、submit（送信）ボタンを押さずにデータが送信されてしまうことがある。用途によってはその方が使いやすいこともあるが、編集中に意図せず送信されてしまうこともあるので、この動作を抑止したい。どうするか。

submitボタン

まず、submitボタンがあるかどうか。submitボタンがあるとき、input[type="text"]で生成されるテキストコントロール内でEnterキーを打つと、フォームデータが送信される。

例えば、次のようなフォームの場合。テキストコントロールが一つでも二つ以上でも同じであり、IE / Mozillaとも同じように振る舞う。

<form action="test">
  <input type="text" name="a"> <input type="text" name="b">
  <input type="submit">
</form>

<form action="test">
  <input type="text" name="a"> <input type="text" name="b">
  <button type="submit">push me</button>
</form>

テキストコントロールが複数ある場合、次のように書き換えると、この挙動を止めることができる。buttonタグにはtype属性が必要なことに注意。

<form action="test">
  <input type="text" name="a"> <input type="text" name="b"> 
  <input type="button"  value="push me">
</form>

<form action="test">
  <input type="text" name="a"> <input type="text" name="b">
  <button type="button" >ボタンです？</button>
</form>

一つだけのテキストコントロール

テキストコントロールが一つだけの場合は、より難しい。上記のようにinput[type="button"]またはbutton[type="button"]タグでsubmitボタンを生成していても、Enterキーで送信されてしまう。

次の例には、textareaによるテキストコントロールや隠蔽コントロールがあるが、これは考慮されず、あくまでもinput[type="text"]によるテキストコントロールの数によって挙動が決まる。

<form action="test">
  <textarea></textarea>
  <input type="hidden" name="dummy" value="dummy">
  <input type="text" name="b">
  <button  type="button">ボタンでーす</button>
</form>

このような場合は、見えないテキストコントロールを生成するのがいい。CSSで、position:absolute; visibility:hidden と指定する。

<form action="test">
  <input type="text" name="a">
  <input type="text" name="dummy" style="position:absolute;visibility:hidden">
  <input type="button" value="hoge" >
</form>