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，只需在文本框中输入内容，然后点击“提交”即可。你会看到这条消息。然后（如果可以）更改文本，并尝试点击“提交”＃39;再次。它不会让你。

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);  
  }
});

您可能只关注在该表单上的输入字段中输入输入 - 假设您只有一个表单：

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

<强>更新：在使用iOS时，您可能希望关注“keypress”而不是“keydown”。

Answer 2

你的问题是;获取ajax请求后的错误div与移动浏览器中的表单重叠，如下图所示。

你可以使用;

margin-top:20px;

为您的错误div。解决之后，只需使用

return false;

而不是

e.preventDefault();

因为移动浏览器没有点击事件。你需要使用touchstart或touchend。

完整代码

$("#formRegister").submit(function (e) {
    var code = $('#Code').val();
    vipLookup(code);
    return false;
});

此外，关于SO中移动浏览器的e.preventDefault存在很多问题。

Mobile Safari preventDefault() not working? Android works fine

e.PreventDefault() & e.stopPropogation() not working on tablet & mobile

preventDefault（）似乎禁用整个表单？

2 个答案: