Question

我有一个输入文本，我将其用于建议项目的typeahead插件，但是当我在输入文本上按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

第一个答案对我没有用，可能是因为更新了typeahead插件，但我确实通过使用typehead创建的'alternative'输入来解决问题：

$(".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

根据documentation，您可以将选项confirmKeys设置为除返回（13）之外的其他内容：

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

然而，更明智的方法是prevent sending the form on enter。

Answer 4

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

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

Answer 5

我在使用CodeIgniter和bootstrap的项目中遇到相同的问题在这里，我找到了解决方案，它可以正常工作。

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

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

Answer 6

使用这个

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

如何阻止提交按下输入twitter bootstrap typeahead插件

6 个答案: