防止表單提交輸入密鑰keydown？

我已經構建了一個偵聽器來防止表單在特殊的情況下提交。防止表單提交輸入密鑰keydown？

我使用谷歌地圖自動完成api，基本上我不想提交表單，當用戶按下輸入和「推薦結果框」顯示。當用戶按下回車鍵從下拉框中選擇一個值，而不是提交表單。

我已經構建了一個偵聽器來正確捕獲事件，但我不知道如何阻止提交表單。

$('body').live('keydown', function(e) { 
    if($(".pac-container").is(":visible") && event.keyCode == 13) { 
     e.preventDefault(); // Prevent form submission 
     } 
    });

我試過用e.preventDefault（）;但它仍然提交表格。表單ID是：updateAccountForm

我該如何防止它發生？

編輯：我必須指出，直接在搜索輸入上聆聽按鍵衝突似乎與Google API衝突導致自動完成功能無效。因此，沒有$('input#search')的keydown /按鍵可以

來源

2012-08-10 lisovaccaro

'e.stopPropagation（）'和/或'return false;'之後，解決問題？ – 2012-08-10 08:50:27

nope，我只是試過 – lisovaccaro 2012-08-10 08:59:26

我現在看到你在身體上增加了監聽器。所以鍵入事件在輸入提交後被觸發。嘗試查看'.bind'並查看第三個參數'preventBubble'（我不確定，現在我無法測試它）。否則，我認爲你應該在輸入字段中附加監聽器，或者在表單上附加提交監聽器。 – 2012-08-10 09:11:04

我想你應該......嘗試使用像這樣的檢查包裹你的容器的知名度

$('body').keypress(function(e) 
{ 
    if (e.keyCode == '13') { 
    e.stopPropagation() 

    } 
});

的文章here有一個很好的解釋。

來源

2012-08-10 08:55:11

這對我不起作用，因爲在按鍵事件被觸發時，.pac容器已經消失了（我注意到你沒有得到原始海報條件來檢查.pac容器的可見性）。因此，這樣做的工作方式，所有**表單提交與回車將被拒絕，這將不會真正的工作。似乎工作的唯一答案是下面的Liso22建議。 – 2014-01-01 02:40:36

另外，在* if *子句中有一個錯誤，keyCode不是字符串： 'if（e.keyCode == 13）' – ZombieBsAs 2016-11-01 15:39:30

阻止表單提交

<form method="post"> 
    <input type="text" id="search"> 

    </form> 
 
    <script> 
     $('input#search').keypress(function(e) { 
      if (e.keyCode == '13') { 
      e.preventDefault(); 

      } 
     }); 
    </script>

來源

2012-08-10 08:54:40 Sibu

我之前嘗試過，我應該指出。如果您直接向其添加按鍵監聽器，Google API似乎無論是否自動填充輸入都會失效。這就是爲什麼我試圖傾聽身體。 – lisovaccaro 2012-08-10 08:57:51

試試這個

$('body').live('keydown', function(e) { 
    if($(".pac-container").is(":visible") && e.keyCode == 13) { 
     e.stopPropagation(); // Prevent form submission 
    } 
});

請參閱e .keyCode代替event .keyCode 和e.stopPropagation()，而不是e.preventDefault

來源

2012-08-10 09:23:24

該解決方案實際上是非常簡單的。所有聽衆似乎都失敗了，但是加入：

onkeydown="if($('.pac-container').is(':visible') && event.keyCode == 13) {event.preventDefault();}"

直接向輸入做了訣竅。

來源

2012-08-10 09:37:52 lisovaccaro

請原諒我的無知，但是當您說「直接添加它到輸入「？ – starsplusplus 2015-04-07 11:36:09

他意味着將它直接添加到輸入標籤： – Flyingkiwi 2015-06-24 13:05:56

當我用谷歌地圖自動完成框我想作「進入」和「標籤」選擇第一項。我遵循上面鏈接的@amirnissim的解決方案，如果從輸入元素中按下任意一個輸入/選項卡，模擬向下箭頭按鍵。

當我編碼它時，我沒有將這些輸入作爲表單的一部分。我不知道如何防止窗體發送輸入密鑰（事實上，這是我如何發現這個問題），但是當我使用自動完成時，我的輸入不是表單的一部分。

來源

2013-07-22 18:56:17 Plato

爲了防止輸入鍵，從上Google Places API autocomplete's text field提交表單，我需要一個的keydown處理器...

$(document).on('keydown', '#my-autocomplete', function(e) { 
    if (e.which == 13) { 
     $('#my-autocomplete').show(); 
     return false; 
    } 
});

...和place_changed監聽器連接到自動完成它被實例化後：

var my_autocomplete = new google.maps.places.Autocomplete(/*...*/); 
google.maps.event.addListener(my_autocomplete, 'place_changed', function() { 
    var place = my_autocomplete.getPlace(); 
    if (!place.place_id) { return; } 
});

這不是問題，但它可能，這個解決方案jQuery Mobile的web應用程序內工作。

來源

2015-04-08 13:08:35

我認爲上面的第一個代碼示例是足夠的，因爲它允許您定位特定元素而不僅僅是整個文檔。您可能想要在每個特定元素上的「除外」處輸入。不知道爲什麼沒有投票。我猜OP需要谷歌地圖的一些功能，因爲我不需要這樣的解決方案，除了定位和元素，並按下「Enter/Return」時阻止提交。 – greaterKing 2015-10-06 19:31:33

防止表單提交輸入密鑰keydown？

回答

相關問題