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

行動版 for , 瀏覽人次: 132  , SSL Connection

• 常常在一些網頁登入畫面,或是登入網路銀行時,輸入完帳號密碼後還要按下送出按鈕才會登入,有時候可以更貼心一點,讓使用者輸入完帳密後按下鍵盤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>