jquery - 如何防止在 twitter bootstrap typeahead 插件中按 enter 提交

Question

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

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

Answer 1

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

JS

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

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

Answer 3

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

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

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

Answer 4

根据文档，您可以将选项设置为confirmKeysreturn (13) 以外的其他内容：

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

但是，解决此问题的一种更聪明的方法是防止在 enter 上发送表单。

Answer 5

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

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

Answer 6

用这个

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