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> 

をそしてここにその背後にあるスクリプトです：私はいくつかのブラウザ（特に任意のiOSデバイス、またはエミュレートで見てい

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

奇妙なことは、 ChromeのiOSデバイス）では、ボタンをクリックするとフォームが無効になります。私は、テキストボックスに再フォーカスすることはできませんし、もう一度ボタンをクリックすることはできません。

e.preventDefault();を削除した場合、問題は解決しますが、もちろん、ページが最新表示され、エラーメッセージが消えるという新たな問題が発生します。

あなたはここにこの動作を確認することができます

Chromeを使用して

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

、単なるテキストボックスに何も入力して「送信」をクリックします。メッセージが表示されます。それから（できれば）テキストを変更し、もう一度[送信]をクリックしてみてください。それはあなたを許さない。

Answer 1

問題は次のとおりです。あなたのエラーdivは、ajaxリクエストを取得した後、モバイルブラウザのフォームと重なります（下の画像を参照）。

あなたが使用することができます。

margin-top:20px; 

エラーdiv。ことを解決した後、クリックするだけのイベントを持っていない

return false; 

代わりに、モバイルブラウザbeacuse

e.preventDefault(); 

のを使用しています。あなたは、タッチスタートまたは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

Answer 2

形であなたの目標は、通常のリクエストでそれを提出しない場合は、送信ボタンを追加しないでください。代わりに、タイプのボタンとボタンを追加します。

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

し、その後、フォームの提出代わりに、そのボタンにあなたのEventHandlerを添付トリガされません

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

。

Enterキーを押すことを処理する場合は、そのためのハンドラを追加します。

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

UPDATE： -

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

と

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

あなたはそれだけでフォームの入力フィールドに入力打つために監視するかもしれない

一つだけのフォームを持っていると仮定し あなたはiOSで作業するときに「keydown」の代わりに「keypress」を見たいかもしれません。