如何防止在 twitter bootstrap typeahead 插件中按 enter 提交答案

【问题标题】：how prevent submit on press enter in twitter bootstrap typeahead plugin如何防止在 twitter bootstrap typeahead 插件中按 enter 提交
【发布时间】：2012-11-25 13:55:42
【问题描述】：

我有一个输入文本，我将它应用到预先输入的插件以建议项目，但是当我在输入文本上按 Enter 键时，它会提交表单。

如何防止使用 twitter bootstrap typeahead 插件提交表单？

【问题讨论】：

标签： jquery twitter-bootstrap form-submit preventdefault

【解决方案1】：

您可以通过向其添加 ID 并简单地删除 keydown 事件来定位特定输入，如下所示：

JS

$(document).ready(function() {
  $('form input').keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

【讨论】：

您可能不想要return false。 @见fuelyourcoding.com/jquery-events-stop-misusing-return-false
也许@paganotti 想按回车键提交其他人输入的表单并忽略标签输入。

【解决方案2】：

第一个答案对我不起作用，可能是因为更新了预输入插件，但我确实通过使用由 typehead 创建的“替代”输入解决了这个问题：

$(".twitter-typeahead > input").focus(function(){
    //disable btn when focusing the input
    $("#my_submit_button").prop('disabled', true);
}).blur(function(){
    //enable btn when bluring the input
    $("#my_submit_button").prop('disabled', false);
});

【讨论】：

【解决方案3】：

根据documentation，您可以将选项confirmKeys 设置为return (13) 以外的其他值：

$('input').tagsinput({
   confirmKeys: [188, 32, 39],
});

但是，解决此问题的更明智的方法是prevent sending the form on enter。

【讨论】：

【解决方案4】：

我在使用 CodeIgniter 和 bootstrap 的项目中遇到了同样的问题在这里我找到了解决方案并且它有效。

只需在表单中添加onsubmit="return false;"，如下所示：

<form id="frmcrud" method="post" onsubmit="return false;">

【讨论】：

这正是我所需要的。此外，我想单击搜索图标或按 enter 来触发搜索（使用记录在案的 trigger('input.typeahead') ）而不提交表单（至少目前如此），因此扩展 onsubmit 以触发搜索事件：onsubmit="console.log('trigger manual search of .js-typeahead-frmcrud'); $('.js-typeahead-frmcrud').trigger('input.typeahead'); return false;"

【解决方案5】：

我发现解决此问题的最佳方法是不使用提交输入。改为使用按钮输入，并添加一些 js 以在单击时提交表单。

$('#my_submit_button').click(function(){
    $(this).parents('form').submit();
});

【讨论】：

【解决方案6】：

使用这个

$('.bootstrap-tagsinput input').keydown(function( event ) {
 if ( event.which == 13 ) {
    $(this).blur();
    $(this).focus();
    return false;
 }
})

【讨论】：