表單無提交按鈕輸入

Question

對於表單，無需提交按鈕，帶有1個文本輸入，按Enter鍵提交。

對於窗體，如果沒有提交按鈕，超過1個文本輸入，請不要在Enter上提交。

兩者都不應該提交回車？

<!-- This one do submit on Enter --> 
 
<form action="/"> 
 
    <input type="text" name="firstname" value="Mickey"> 
 
</form> 
 

 
<!-- This one do not submit on Enter --> 
 
<form action="/"> 
 
    <input type="text" name="firstname" value="Mickey"> 
 
    <input type="text" name="lastname" value="Jerry"> 
 
</form>

Answer 1

如果表單沒有提交按鈕，則隱含提交 機制必須做什麼，如果窗體上有多個字段 塊隱含提交，並且必須從提交的表單元素否則形式元素本身也是 。

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission

你可以看到這裏的形式是如何工作的，沒有提交按鈕： https://www.tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/#no-submit-buttons

Answer 2

一般來說，它是不行的壓制回車鍵的方式來提交表單。這被放棄，您可以實現這種功能，使用JavaScript的jQuery庫（它會更容易使用）。

這是您的HTML的修改版本。我添加了一個數據屬性，以確定這些形式，這不會對Enter鍵提交：

<!-- This one WILL NOT submit, when the Enter key is pressed --> 
<form action="/" data-disable-enter="1"> 
    <input type="text" name="firstname" value="Mickey"> 
</form> 

<!-- This one WILL submit, when the Enter key is pressed 
    If you want to suppress the Enter key submission, add the data attribute data-disable-enter="1" --> 
<form action="/"> 
    <input type="text" name="firstname" value="Mickey"> 
    <input type="text" name="lastname" value="Jerry"> 
</form> 

這裏是JavaScript代碼，使用jQuery庫來抑制回車鍵提交表單。附上一個事件監聽器，用於偵聽每個表單元素（input，select和textarea）上​​事件的所有表單中具有數據屬性data-disable-enter="1"的所有表單。如果按下的鍵碼是13（which means "Enter"），那麼我們將阻止與按鍵相關的默認操作，在我們的例子中是表單提交。

jQuery("form[data-disable-enter='1']").find("input, select, textarea").on("keydown", function(e){ 
    // 13 is the key code for the Enter key 
    if(e.keyCode === 13){ 
     e.preventDefault(); 
    } 
});