IE使用Enter键提交表单时会重点关注“提交”按钮

Question

我目前在我的一个应用程序中有一个表单，该表单使用隐藏按钮来解决Android上数字键盘的问题。 本质上，按Enter键或聚焦按钮将提交表单。

按下Enter键可在Chrome（桌面），Firefox（桌面）和Safari（iOS）中运行，并且仅提交一次表单。 在IE中，浏览器两次提交表单，因此我只能假定当用户按下Enter键时，它会集中提交按钮。

这是演示的示例。 在我测试过的Chrome和其他浏览器中，只需清除该框即可。 在IE中，它将警告“无效数量”。

jsfiddle

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进行这种由隐藏字段引起的双重提交？

Answer 1

确实没有必要两次调用SubmitQuantity函数。 不能完全确定您的Android问题（也许可以详细说明吗？），但是我怀疑您正在使用隐藏的“提交”按钮来实际发布表单。 在form元素上使用submit数据绑定将阻止表单提交 。 从KO文档 ：

当您在表单上使用submit绑定时，Knockout将阻止浏览器对该表单进行默认的提交操作。 换句话说，浏览器将调用您的处理程序函数，但不会将表单提交给服务器。 这是一个有用的默认值，因为使用submit绑定时，通常是因为您使用表单作为视图模型的接口，而不是常规的HTML表单。 如果您确实希望让表单像普通的HTML表单一样提交，只需从您的submit处理程序返回true 。

所以，你可以完全删除隐藏按钮，返回true在你SubmitQuantity功能，当你准备好表单提交-在这个例子中，这将是唯一的后Quantity是多少。

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

更新的小提琴