網頁設計 - 按下「Enter」鍵時，表單將自動提交

常常在一些網頁登入畫面,或是登入網路銀行時,輸入完帳號密碼後還要按下送出按鈕才會登入,有時候可以更貼心一點,讓使用者輸入完帳密後按下鍵盤enter鍵即可登入系統。

以下是一個簡單的範例網頁，其中包含三個文字輸入欄位，當在任何一個欄位中按下「Enter」鍵時，表單將自動提交，不需要按送出按鈕。

<h1>自動提交表單範例</h1>
<?php
 //echo $_POST['input1'];
?>
<form action="ttt.php" method="post">
  <label for="input1">輸入欄位1：</label>
  <input type="text" name="input1"><br><br>
  <label for="input2">輸入欄位2：</label>
  <input type="text" name="input2"><br><br>
  <label for="input3">輸入欄位3：</label>
  <input type="text" name="input3"><br><br>
      <p><input type="submit" value="送出資料"></p>
</form>
<script>
  // 監聽所有輸入欄位的keydown事件
  var inputs = document.querySelectorAll('input');
  inputs.forEach(function(input) {
    input.addEventListener('keydown', function(e) {
      // 如果按下Enter鍵，則自動提交表單
      if (e.keyCode === 13) {
        e.preventDefault();
        input.form.submit();
      }
    });
  });
</script>

分享這篇文章的網址這篇文章的網址(可分享到FB、LINE)：

用LINE分享給朋友: