當使用回車鍵提交表單時，IE將焦點提交按鈕

我目前在我的一個應用程序中使用隱藏按鈕作爲解決Android數字鍵盤問題的表單。基本上，按下回車鍵或聚焦按鈕將提交表單。當使用回車鍵提交表單時，IE將焦點提交按鈕

按下輸入可以在Chrome（桌面），Firefox（桌面）和Safari（iOS）中使用，只提交一次表單。在IE中，瀏覽器提交表單兩次，所以我只能假定當用戶按下回車鍵時，它將重點提交按鈕。

下面是一個演示此示例的示例。在我測試過的Chrome和其他瀏覽器中，它只會清除該框。在IE中，它會提醒「數量無效」。

HTML：

<form data-bind="submit: SubmitQuantity"> 
    Quantity: 
    <input id="quantity" type="number" data-bind="value: Quantity, valueUpdate: 'afterkeydown'"/> 
    <button type="submit" data-bind="event: { focus: SubmitQuantity }" class="hidden_button"></button> 
</form>

CSS：

.hidden_button { 
    width: 0px; 
    height: 0px; 
    font-size: 0px; 
    border: 0px; 
    left: -9999px; 
    padding: 0px 0px 0px 0px; 
}

JS：

var viewModel; 

function ViewModel() { 
    var self = this; 
    self.Quantity = ko.observable(''); 
    self.SubmitQuantity = function() { 
     if (isNaN(self.Quantity())) { 
      alert('Invalid quantity'); 
      return; 
     } 
     self.Quantity(undefined); 
    }; 
} 

viewModel = new ViewModel(); 
ko.applyBindings(viewModel);

有沒有辦法阻止IE做這種雙重提交是由聚焦隱藏領域造成的？

來源

2014-03-12 Nathan

不知道這是否修復它，但沒有'按鈕類型= 「提交」'試着用'型=一個'input' 「提交」'。 – rgthree

有一個'button type =「submit」'。 http://www.w3schools.com/tags/att_button_type.asp – Nathan

確定有一個按鈕類型=「提交」https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button# attr-type –

沒有任何真正需要撥打SubmitQuantity函數兩次。不完全確定你的Android問題（也許你可以詳細說明嗎？），但我懷疑你正在使用隱藏的提交按鈕來實際發佈表單。在form元素上使用submit數據綁定，會阻止表單提交。從KO docs：

當您使用submit窗體上綁定，淘汰賽將阻止瀏覽器的默認行爲提交該窗體。換句話說，瀏覽器會調用你的處理函數，但是而不是將表單提交給服務器。這是一個有用的默認設置，因爲當您使用綁定時，通常是因爲您將表單用作視圖模型的界面，而不是常規的HTML表單。如果您確實希望讓表單像正常的HTML表單一樣提交，只需從您的submit處理程序返回true即可。

所以，你可以完全刪除隱藏按鈕，並在SubmitQuantity函數返回true當你準備好表單提交 - 在這個例子中，這將是唯一的後Quantity是一個數字。

self.SubmitQuantity = function() { 
    if (isNaN(self.Quantity())) { 
     alert('Invalid quantity'); 
     return false; 
    }else{ 
     return true; // form will be submitted 
    } 
    self.Quantity(undefined);   
};

Updated fiddle

來源

2014-03-12 20:06:13 rwisch45

股票Android鍵盤無法正確處理數字輸入字段。它沒有一個輸入按鈕，它有一個「下一個」按鈕，它起到一個標籤的作用。要在下一個按鈕被按下時提交表單，典型的解決方案是在焦點提交的字段後面有一個隱藏按鈕。這是在一個頁面的應用程序，所以我實際上不希望它提交。這就是我爲什麼要處理提交的原因。這裏的問題是，在IE中它提交了兩次這個演示。即使提交了有效數量，這也會導致「無效數量」警報被拋出。 – Nathan

我認爲在下次點擊時在移動設備上提交表單是不好的。接下來應該是，接下來.. –

@MartinHansen我同意，但由於數字鍵盤上沒有輸入按鈕，因此無法在Android上提交表單，而無需添加可見按鈕，劫持Next按鈕或構建自定義鍵盤並讓每位客戶安裝它。一些移動應用程序（例如我的）根本無法承擔可見提交按鈕所需的房地產，並且公司更願意爲建立自定義鍵盤而添加輸入密鑰。 – Nathan

當使用回車鍵提交表單時，IE將焦點提交按鈕

回答

相關問題