輸入觸發按鈕點擊

115

我有一個頁面有兩個按鈕。一個是<button>元素，另一個是<input type="submit">。這些按鈕按照該順序出現在頁面上。如果我位於表單中任何位置的文本字段並按<Enter>，則會觸發按鈕元素的click事件。我認爲這是因爲按鈕元素第一。輸入觸發按鈕點擊

我找不到任何看起來像設置默認按鈕的可靠方式，也不一定要在這一點上。在沒有什麼更好的主意，我在表格上捕獲一個按鍵，並在任何地方，如果它是被按下的鍵<Enter>，我只是否定它：

$('form').keypress(function(e) { 
    var code = e.keyCode || e.which; 

    if(code === 13) { 
    e.preventDefault(); 
    return false; 
    } 
})

至於我可以告訴這樣很遠，它似乎在工作，但它感覺非常火腿。有沒有人知道這樣做的更復雜的技術？同樣，這種解決方案有什麼缺陷，我只是不知道？

謝謝。

來源

2011-01-21 Rob Wilkerson

我的網站，儘管**我做這種方式這樣做**。 https://script.google.com/macros/s/AKfycbxXiX0dW5Yn554gfPIa60uFK21E20HaADp4KqJ2IDIqFb0A3NMP/exec – 2017-08-22 02:11:32

按下輸入窗體的文本字段將默認提交表單。如果你不希望它以這種方式工作，你必須捕獲輸入鍵按下並像你所做的那樣消耗它。這是沒有辦法的。即使窗體中沒有按鈕，它也會以這種方式工作。

來源

2011-01-21 20:56:56 Sparafusile

我不認爲問題是表單提交，它是觸發按鈕元素的`click`操作wish是一個意想不到的後果 – 2011-01-21 21:33:26

你是對的。無論哪種方式，結果都是一樣的 - 您必須捕獲回車鍵以防止不需要的表單提交。 – Sparafusile 2011-01-21 23:05:59

我會這樣做：在按鈕的onclick事件處理程序（不提交）中檢查事件對象的鍵碼。如果它是「輸入」，我會返回false。

來源

2011-01-21 21:00:20 Satyajit

該鍵碼總是被傳遞，就像它是一個點擊。這就是問題所在。 :-) – 2011-01-21 21:10:54

然後，我想你會這麼做 - 在按鈕上處理onkeydown事件。處理程序將傳遞一個keyEvent;檢查keyCode - > if 13，preventDefault。通過這種方式，您實際上可以讓用戶按下該按鈕上的輸入，而無需執行單擊事件的副作用。 – Satyajit 2011-01-21 22:14:13

您可以使用JavaScript來阻止表單提交，直到適當的時間。一個非常粗略例如：

<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html"> 

    <input type='text' name='txtTest' /> 

    <input type='button' value='Submit' 
     onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' /> 

</form>

按下Enter鍵將仍然觸發表單提交，但JavaScript的保持它的實際提交，直到你真正按按鈕。

來源

2011-01-21 21:08:03 Dave

喜歡這個破解！ – 2012-03-28 16:24:11

閱讀HTML規範真正瞭解什麼樣的行爲是可以預料到這一點很重要：

的HTML5 spec explicitly states what happens in implicit submissions：

表單元素的默認按鈕是樹順序的第一個提交按鈕，其形式所有者是那個形式元素。

如果用戶代理支持讓用戶隱式提交表單（例如，某些平臺在文本字段集中隱式提交表單時觸擊「輸入」鍵），那麼對於默認按鈕具有已定義的激活行爲必須導致用戶代理在該默認按鈕上運行合成點擊激活步驟。

這並沒有在HTML4規範中明確指出，但是瀏覽器已經實現了HTML5規範中描述的內容（這就是爲什麼明確包含它）。

編輯補充：

我能想到的最簡單的答案是把你的提交按鈕的形式第一[type="submit"]項目，添加填充與CSS的底部形態，絕對定位提交按鈕在你想要的地方。

來源

2011-01-21 21:19:15 zzzzBov

在那裏，我詛咒IE，事實證明這是我一直以來的馬虎標記！乾杯! – Shawson 2013-07-02 13:57:06

通過在專注的<input type="text">上按下'Enter'，可觸發第一個定位元素上的'點擊'事件：<button>或<input type="submit">。如果您在<textarea>中按「輸入」，則只需創建一個新的文本行。

請參閱示例here。

您的代碼會阻止在<textarea>中創建新的文本行，因此您必須僅在<input type="text">時才能捕獲按鍵。

但是爲什麼您需要在文本字段中按Enter？如果您想通過按'Enter'提交表單，但<button>必須保持佈局中的第一個，只需使用標記：將<input type="submit">代碼放在<button>之前，然後使用CSS保存所需的佈局。

追趕「回車」和保存標記：

$('input[type="text"]').keypress(function (e) { 
    var code = e.keyCode || e.which; 
    if (code === 13) 
    e.preventDefault(); 
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/ 
});

來源

2011-01-24 12:14:09 Feniks502

我不認爲你需要JavaScript或CSS來解決這個問題。

根據html 5 spec for buttons，不具有type屬性的按鈕被視爲與其類型設置爲「submit」的按鈕相同，即作爲用於提交其包含表單的按鈕。將按鈕的類型設置爲「按鈕」應該可以防止您看到的行爲。

我不確定瀏覽器是否支持此操作，但在html 4.01 spec for buttons中指定了相同的行爲，所以我期望它很好。

來源

2011-09-16 13:45:19 Leinster

257

使用

<button type="button">Whatever</button>

應該做的伎倆。

原因是因爲表單中的按鈕的類型隱式設置爲submit。正如zzzzBoz所說的那樣，Spec說第一個button或input與type="submit"是在這種情況下觸發的。如果您專門設置type="button"，那麼它從審議瀏覽器中刪除。

來源

2012-10-16 12:27:01 Maddog

-1

我添加類型的鍵「提交」爲形式的第一元件，並使其不可見（width:0;height:0;padding:0;margin:0;border-style:none;font-size:0;）。像網站刷新一樣工作，即按下按鈕時除非再次加載站點，否則我不做任何操作。對我來說，工作得很好......

來源

2016-08-12 13:10:02 torabe

輸入觸發按鈕點擊

回答

相關問題