javascript - PreventDefault() 似乎禁用了整个表单？

Question

我有一个非常简单的表格:

<form id="formRegister">
    ....
    <input autocomplete="off" class="form-control input-sm required " id="Code" maxlength="10" name="Code" placeholder="VIP Code" style="width:150px;" type="text" value="">
    ....
    <button id="btnVIPCodeLookup" type="submit" class="button-primary">Submit<i class="icon"></i></button>
</form>

这是其背后的脚本:

// Landing page form submit
$("#formRegister").submit(function (e) {
    e.preventDefault();
    var code = $('#Code').val();
    vipLookup(code);
});

function vipLookup(code) {
    showBusy();
    $.getJSON("/EventRegistration/EventRegistrationCodeLookUp", { code: code }, function (data) {
        hideBusy();
        if (data.Result == "true") {
            $('#CodeResultSpan').text('');
            $('#EncryptedCode').val(data.EncryptedVIPCode);
            ShowLegal();
        }
        else
        {
            if (data.Result == "false") {
                $('#CodeResultSpan').text('VIP Code not found. Please check the VIP Code you received and try again.');
            }
            if (data.Result == "used") {
                $('#CodeResultSpan').text('VIP Code has been used.');
            }
            if (data.Result == "error") {
                $('#CodeResultSpan').text('There was an error while looking up your VIP Code.  Please try again.');
            }
            if (data.Result == "canceled") {
                $('#CodeResultSpan').text('This VIP Code has been canceled.');
            }
            $('#Code').css('border-bottom', '1px solid #e03e3e');
        }
    });
}

我在某些浏览器(尤其是任何 iOS 设备，或在 Chrome 中模拟 iOS 设备时)中看到的奇怪的事情是，单击按钮后，表单将被禁用。我无法重新聚焦到文本框，也无法再次单击该按钮。

如果我删除 e.preventDefault(); 那么问题就会消失，但这当然会产生一个新问题，因为页面刷新，错误消息消失。

您可以在此处查看实际效果:

http://dev.walkup.audidriveusa.com/EventRegistration

使用 Chrome，只需在文本框中输入任何内容，然后点击“提交”即可。您会看到该消息。然后(如果可以的话)更改文本，并尝试再次单击“提交”。它不允许你。

Answer 1

如果您的表单目标不是通过正常请求提交它，那么您不应该添加提交按钮。添加一个带有类型按钮的按钮:

<button type="button" id="submitButton">some text</button>

和

$('#submitButton').on('click', function (e) {
  var code = $('#Code').val();
  vipLookup(code);
});

这不会触发表单的提交，而是将事件处理程序附加到该按钮。

如果您想处理按 Enter 键的情况，请为此添加一个处理程序。

<div id="containerToWatchForEnter">
<form>
...
</form>
</div>

和

$('#containerToWatchForEnter').on('keydown', function (e) {
  if(e.which == 13) {
    var code = $('#Code').val();
    vipLookup(code);  
  }
});

您可能只注意在该表单的输入字段中按 Enter 键 - 假设您只有一个表单:

$('form:input').on('keydown', ...

更新:使用 iOS 时，您可能需要注意“keypress”而不是“keydown”。