爲什麼單輸入字段的形式提交。在按下輸入回車鍵

爲什麼一個<form>與單個<input>場當用戶輸入一個值，按下輸入，它不一樣，如果將刷新形式<form>有兩個或更多字段？爲什麼單輸入字段的形式提交。在按下輸入回車鍵

我寫了一個simple page來測試這種古怪。

如果您在第二個表單中輸入一個值並按Enter鍵，則會看到它將重新加載通過輸入值的頁面，就像您調用GET一樣。爲什麼？我如何避免它？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>testFormEnter</title> 
</head> 
<body> 
<form> 
    <input type="text" name="partid2" id="partid2" /> 
    <input type="text" name="partdesc" id="partdesc" /> 
</form> 
    <p>2 field form works fine</p> 
<form> 
<input type="text" name="partid" id="partid" /> 
</form> 
<p>One field form reloads page when you press the Enter key why</p> 
</body> 
</html>

來源

2009-09-02 sdfor

這是一個鮮爲人知的「怪癖」，已經出現了一段時間。我知道有些人以各種方式解決了這個問題。

我認爲最簡單的旁路是簡單地有第二個輸入不顯示給用戶。並非所有用戶在後端都很友好，它確實可以解決問題。

我應該注意到，我聽說這個問題最常見的地方是使用IE，而不是使用FireFox或其他。儘管它確實也影響了他們。

來源

2009-09-02 20:50:15

謝謝，我希望它被記錄在某處。我花了幾個小時調試一個大頁面，認爲它是別的東西，與我的ajax綁定在一起。我在提取代碼並開始逐行刪除行後才發現「quirk」。真是浪費時間！ – sdfor 2009-09-02 20:54:40

你說得對，這是一個隱藏字段的簡單修復。順便說一句，如果影響Firefox 3.5.2。也許它被認爲是一個功能。 – sdfor 2009-09-02 21:06:26

啊，是的，我感覺到你的痛苦....這就是我對它的瞭解，比如5-6年前... – 2009-09-02 21:06:38

它不會重新加載頁面，因爲它正在提交表單。

但是，在這個例子中，因爲您沒有提交給它自己的表單上的action屬性，這給出了重新載入頁面的印象。

另外，我不能重複你描述的行爲。如果我在表單中的任何文本輸入中，並按Enter，則無論輸入位於何處或有多少輸入，它都會提交表單。

您可能想在不同的瀏覽器中嘗試更多。

來源

2009-09-02 20:54:28

你是對的我沒有使用正確的單詞。它提交表單，並且由於我沒有指定一個動作，所以它默認爲自己。我複製了確切的HTML並在IE8和Firefox 3.5.2中運行它。在第一個窗體中的前兩個字段中的回車鍵不會提交表單，而第三個字段中的回車鍵會這樣做。 – sdfor 2009-09-02 21:01:37

這是一個known bug in IE6/7/8。它似乎並沒有得到解決。

您可以爲此做的最佳解決方法是添加另一個隱藏字段（如果您的工程良知允許）。當IE發現表單中有兩個輸入類型的字段時，IE將不再自動提交表單。

更新

如果你想知道爲什麼是這樣的情況下，這種寶石來直出HTML 2.0 specification (Section 8.2)的：

當在一個只有一個單行文本輸入框表格，用戶代理應該接受該字段中的Enter作爲請求提交的表格。

來源

2009-09-02 21:46:18

這也發生在Firefox 3.5 – cssmaniac 2009-10-20 10:40:34

+1鏈接到規範 – 2011-07-18 23:39:56

中的罪魁禍首，也發生在鉻... – 2015-12-16 11:06:15

按Enter鍵的工作方式根據（a）有多少個字段和（b）有多少個提交按鈕有所不同。它可能什麼都不做，它可能沒有提交'成功'提交按鈕，或者它可能假裝第一個提交按鈕被點擊（甚至爲它生成一個onclick！）並提交該按鈕的值。

例如，如果您將input type="submit"添加到您的雙字段表單中，您會注意到它也提交了。

這是一個古老的瀏覽器怪癖，至少可以追溯到早期的Netscape（也許還有），現在不太可能改變。

<形式>

無效沒有「動作」。如果您不打算提交任何地方，並且您不需要單選按鈕名稱分組，則可以完全省略表單元素。

來源

2009-09-03 16:09:10 bobince

謝謝，很好的回答。雖然我需要表單來序列化Ajax的字段。我可以手動編寫它，但有很多形式，這將是一個痛苦。 – sdfor 2009-09-03 20:47:14

感謝所有回答的人。令人大開眼界的是，具有單個字段的表單的行爲不同於具有多個字段的表單。

處理這種自動提交的另一種方法是編寫一個返回false的提交函數。

在我的情況中，我有一個帶有onclick事件的按鈕，所以我將帶有添加的return關鍵字的函數調用移到了onsubmit事件中。如果調用的函數返回false，則不會發生提交。

<form onsubmit="return ajaxMagic()"> 
<input type="text" name="partid" id="partid" /> 
<input type="submit" value="Find Part" /> 
</form 

function ajaxMagic() { 
    ... 
    return (false); 
}

來源

2009-09-04 22:59:19 sdfor

這裏是我用來將用來解決該問題的代碼：

<form> 
<input type="text" name="partid" id="partid" /> 
<input type="text" name="StackOverflow1370021" value="Fix IE bug" style="{display:none}" /> 
</form>

來源

2009-10-12 18:29:15 JeffJak

我發現對於所有我測試IE，FF，鉻，Safari，Opera或瀏覽器（的溶液）是表單上的第一個輸入type=submit元素必須是可見的，並且必須是表單中的第一個元素。我能夠使用CSS佈局將提交按鈕移動到頁面底部，並且不會影響結果！

<form id="form" action="/"> 
<input type="submit" value="ensures-the-enter-key-submits-the-form" 
         style="width:1px;height:1px;position:fixed;bottom:1px;"/> 
<div id="header" class="header"></div> 
<div id="feedbackMessages" class="feedbackPanel"></div> 
    ...... lots of other input tags, etc... 
</form>

來源

2011-02-17 01:18:02 bfapp

爲維尼特已經說過，這是植根於HTML 2.0規範：

這裏是如何避免這種情況的發生，而不搞砸了你的網址：

<form> 
    <input type="text" name="partid" id="partid" /> 
    <input type="text" style="display: none;" /> 
</form>

來源

2012-08-25 15:27:13 philipphoffmann

在出現此問題IE和Chrome。它不會在Firefox上發生。一個簡單的解決辦法是將以下屬性添加到窗體標籤：的onsubmit =「返回false」

那是當然的，假設你使用XMLHttpRequest對象提交表單。

來源

2012-10-10 12:05:18

是的，形式單一的inputText領域工作的HTML不同4.
的onsubmit通過下面的代碼返回false不是爲我工作，但下面的BUG修復工作正常

<!--Fix IE6/7/8 and HTML 4 bug --> 
    <input style="display:none;" type="text" name="StackOverflow1370021" value="Fix IE bug" />

來源

2013-05-14 07:13:59

我這樣處理但我不確定這是否是一個好方法。通過查找給定表單中的輸入字段以及它是否阻止默認操作。

if($j("form#your-form input[type='text']").length == 1) { 
    $j(this).bind("keypress", function(event) { 
    if(event.which == 13) { 
     event.preventDefault(); 
    } 
    }); 
}

來源

2013-06-13 06:40:34 SpreeTheGr8

我認爲這是一個功能，但我也禁用了它。它不會付出很大的努力來禁用它。只需捕獲輸入密鑰，忽略它就可以了。

來源

2014-07-16 23:08:23 lwpro2

不，默認行爲是在輸入時，表單中的最後一個輸入被提交。如果你不想在所有提交您可以添加：

<form onsubmit="return false;">

或者在你輸入

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

當然還有更漂亮的解決方案，但這些都沒有任何庫或框架簡單。

來源

2016-09-20 21:19:53

我剛剛爲我的網站遇到了這個問題。在我看來，最新的Chrome版本現在實現了[W＃SEC8.2]（https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2），它打破了一些功能我正在開發的網站。 – David 2016-09-22 18:23:24

爲什麼單輸入字段的形式提交。在按下輸入回車鍵

回答

相關問題