防止表单提交字段输入键keydown？ [复制]

Posted 2023-02-22

【中文标题】防止表单提交字段输入键keydown？ [复制]

【英文标题】：Prevent form submit on field enter key keydown? [duplicate]

【发布时间】：2012-08-07 13:17:22

【问题描述】：

我已经构建了一个监听器来防止表单在特殊情况下提交。

我正在使用谷歌地图自动完成 api，基本上我不想在用户按 Enter 并显示“推荐结果框”时提交表单。当用户按下回车键从下拉框中选择一个值而不是提交表单时。

我已经构建了一个可以正确捕获事件的侦听器，但我不知道如何防止表单被提交。

$('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/keypress 是可能的

【问题讨论】：

e.stopPropagation() 和/或return false; 之后，解决问题？

我现在看到你在 body 上添加了监听器。所以keypress事件在输入提交后被触发。尝试查看.bind 并查看第三个参数preventBubble（我不确定，现在无法测试）。否则，我认为您应该在输入字段中附加侦听器或在表单上附加提交侦听器。

老实说，我无法从您的建议中弄清楚该怎么做。请将其添加为问题，我将对其进行测试！谢谢

完成！我已经过测试并且可以正常工作。

您检查过event.keyCode 中确实有任何内容吗？看起来你正在使用 jQuery，所以你应该检查e.which 。

【参考方案1】：

解决方案实际上非常简单。所有听众似乎都失败了，但添加：

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

直接输入就可以了。

【讨论】：

请原谅我的无知，但是当您说“直接将其添加到输入”时，您的意思是什么？

他的意思是直接将其添加到输入标签中：

【参考方案2】：

我认为你应该尝试使用这样的东西......包装检查你的容器的可见性

$('body').keypress(function(e) 

  if (e.keyCode == '13') 
     e.stopPropagation()

   
);​

文章here有很好的解释。

【讨论】：

这对我不起作用，因为在触发 keypress 事件时 .pac-container 已经消失（我注意到您没有原始海报条件来检查 .pac-容器可见性）。因此，按照这种方式，所有 带有 Enter 的表单提交将被拒绝，这将不会真正起作用。似乎唯一有效的答案是下面的 Liso22 建议。

另外if子句也有错误，keyCode不是字符串：if (e.keyCode == 13)

【参考方案3】：

试试这个

$('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

【参考方案4】：

为了防止回车键在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 应用程序中工作。

【讨论】：

我认为上面的第一个代码示例就足够了，因为它允许您定位特定元素而不仅仅是整个文档。您可能希望在特定元素上的每个“除外”处使用 enter。不知道为什么没有投票。我想 OP 需要谷歌地图的一些功能，因为我不需要这样的解决方案，除了目标和元素并在按下“Enter/Return”时阻止提交。

【参考方案5】：

阻止表单提交

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

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

           
        );​
    </script>

【讨论】：

在我应该指出之前我已经尝试过了。如果您直接向其中添加按键侦听器，Google API 似乎会有意或无意地使自动完成输入无效。这就是我试图倾听身体的原因。

【参考方案6】：

相关问题：Google maps Places API V3 autocomplete - select first option on enter

当我使用 Google 地图自动完成框时，我想让“输入”和“选项卡”选择第一项。我按照上面链接的@amirnissim 的解决方案来模拟向下箭头键的按下，如果从输入元素按下输入/制表符。

当我对其进行编码时，我没有将这些输入作为表单的一部分。我不知道如何防止表单在输入键上发送（事实上我就是这样发现这个问题的）但是当我使用自动完成时，我的输入不是表单的一部分。