PlusOne Blog

【html】input[type=”text”] で Enter キーを押すと submit して入力値がクリアされる

form の input[type=”text”] が一つしかないと Enter キーを押すと submit して入力値がクリアされてしまうようです。
この仕様は、ほとんどブラウザの仕様です。
 
例)
form に input[type=”text”] が一つしかないとき

  <form method="post" action="?">
      <input type="text" name="test">
  </form>

 

解決方法)
form に input[type=”text”] が二つ以上あれば、 Enter キーを押しても submit されません。
form に input[type=”text”] が二つ以上作成して、 Enter キーを押すと submit 不必要な input を 「display:none;」で非表示にすればOKです。

  <form method="post" action="?">
      <input type="text" name="test1">
      <input type="text" name="test2" style="display:none;">
  </form>


 
 
 

例)Enter キーを押すと submit して入力値がクリアされてしまう例
form内にinputは2つあり、一方は[type=”text”]、一方は[type=”hidden”]

  <form method="post" action="?">
      <input type="text" name="test1">
      <input type="hidden" name="test2">
  </form>


 
例)Enter キーを押すと submit して入力値がクリアされてしまう例
form内にinputは2つあり、一方は[type=”text”]、一方は[type=”textarea”]

  <form method="post" action="?">
      <input type="text" name="test1">
      <textarea name="test2"></textarea>
  </form>


 
 

 

この記事を読む
記事一覧に戻る