form表單按enter鍵自動提交的問題

風靈使發表於2019-04-18
ORM

1：form表單按enter鍵自動提交的情況

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <form method="post" action="http:www.baidu.com">
        <input>
        <textarea name="text" cols="20" rows="5" />
  </form>
 </body>
</html>

在此文字框中按enter鍵，頁面會自動跳轉到百度的搜尋頁面。

2：解決方案

1）去掉form表單。然後在文字框中按enter鍵就不會出現自動跳轉的情況了。（不建議使用）

2）再新增一個隱藏的文字框。出現問題的原因是form表單中有且只有一個文字框。故新增一個隱藏的文字框也可解決問題。

<input style="display:none"/>

3)在表單上新增屬性"return false";也可以解決問題。

form表單中只有一個input時，按Enter鍵後表單自動提交(form表單的一個小坑)

最近在給公司改專案時發現一個問題，按鈕繫結回車事件後按回車表單執行js方法後表單自動提交重新整理，先執行了js的方法後自動提交表單，使它相當於沒有執行js方法，查閱資料得知在一個form表單中，若只有一個input，按Enter鍵表單會自動提交，但是當表單中存在多個input時，按Enter鍵不會執行任何操作，這是form表單的一個特性。

解決這個問題有四種方法，如下：

  1. 第一種方法，把表單去掉，這是最管用，但也是最傻的方法，直接新增onclick事件，不用表單提交，這種方法就不贅述了。
  2. 第二種方法，很多人估計都想到過，就是既然一個input會自動提交，多個input就沒問題，那麼我給它多加一個input不就行了，有些人試過發現不行，那是為什麼呢？
    因為他是這麼寫的<input type="hidden">，這樣當然不行，一個隱藏域，type並不是text，所以不行。
    但是，<input type="text" style="display:none;">，使用這種方法就可以了，因為它是用樣式隱藏輸入框的，實質上還是一個type為text的input。
  3. 第三種方法，這種方法很好用，直接對form進行操作，個人推薦這種方式。直接在form上加上"return false;"這段話，它會阻止表單的Enter鍵進行提交。
    例：<form action="" method="post" "return false;">
  4. 第四種方法，這種方法是直接對input進行操作，強行將Enter鍵操作去掉，這種方式也不錯，在input上加一個onkeydown事件，
    "if(event.keyCode==13){return false;}"，阻止Enter鍵的操作。
    例：<input type="text" "if(event.keyCode==13){return false;}">

以上四種方法都可以防止表單中只有一個input時，按Enter鍵會自動提交表單的問題。

【完全解決】取消回車自動提交表單

情景一：
form 中沒有需要輸入Enter鍵的控制元件，如沒有textarea

方法一： 在 form 標籤上新增 'onkeypress'

<form ... onkeypress="return event.keyCode != 13;">

方法二： 通過 JQuery 用程式碼統一處理

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

情況二：
form 中有 textarea，需要輸入Enter 鍵，且此Enter鍵不造成Form的自動提交

方法一： 笨辦法 - 適用於控制元件不多的場景，每一個控制元件上單獨新增遮蔽Enter鍵的輸入，如：

<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...

方法二： 用程式碼的方式來批量遮蔽，如下：

$(document).on("keypress", ":input:not(textarea)", function(event) {
    return event.keyCode != 13;
});

方法三： 方法二的改良版，增加了對個別控制元件需要單獨使用Enter鍵做其他操作的個別需求，可以使用如下方法：

$(document).on("keypress", ":input:not(textarea)", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

方法四：針對性遮蔽，比如僅開啟 textarea 和 submit 按鈕的Enter， 如下：

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    // ...
});

相關文章