Question

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

按Enter键可在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通过聚焦隐藏字段来进行双重提交？

Answer 1

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

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

因此，您可以完全删除隐藏按钮，并在准备好提交表单时在true函数中返回SubmitQuantity - 在此示例中，它仅在{{1}之后是一个数字。

Quantity

Updated fiddle

IE使用回车键提交表单时关注提交按钮

1 个答案: