bootstrap-标签输入表单按回车键提交

Question

在 bootstrap-tagsinput 上按下回车键提交下一个标签表单！解决方案是什么？

$("#inputID").tagsinput();

Answer 1

回车键是注册回传表单。这就是为什么会发生这样的情况，即当您按下 'enter' 键时，它会触发 'postback' 事件，因此表单会提交。解决方案：在页面加载上保留标签输入的回车键：

@using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post, new { onkeydown = "return event.keyCode!=13" }))

如果使用 asp.net mvc 框架，这是一个简单的示例。

Answer 2

首先，您需要将 'Enter' 映射到 tagsinput 的 confirmkeys 选项，然后您需要在回车键上调用 preventDefault()以防止提交表单。在我的解决方案中，它仅在用户关注标签输入字段时阻止通过回车键提交。

为了增加一点冗余，我还在输入字段中将回车键重新映射到一个逗号，以确保万无一失。

  $('#tags-input').tagsinput({
    confirmKeys: [13, 188]
  });

  $('#tags-input input').on('keypress', function(e){
    if (e.keyCode == 13){
      e.keyCode = 188;
      e.preventDefault();
    };
  });

仅供参考，回车键映射为13，逗号在JS中为188。

Answer 3

转到tagsinput.js

查找行：

self.$container.on('keypress', 'input', $.proxy(function(event) {

在此函数结束之前添加以下内容：

if (event.which == 13) {
    return false; // dont submit form !!
}

Answer 4

试试这个：

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

Answer 5

这对我有用

$('.bootstrap-tagsinput input[type=text]').on('keydown', function (e) {
   if ( event.which == 13 ) {
           $(this).blur();
           $(this).focus();
           return false;
      }
 });

Answer 6

默认情况下，cancelConfirmKeysOnEmpty 选项设置为 true，但设置为 false 时会在标记定界符 keydown 事件上调用 .preventDefault。将其设置为 false。

此解决方案还解决了“带逗号”的问题。

cancelConfirmKeysOnEmpty: false,

// If the field is empty, let the event triggered fire as usual
if (self.options.cancelConfirmKeysOnEmpty === false) {
  event.preventDefault();
}

bootstrap-标签输入表单按回车键提交

bootstrap-tagsinput form submited on press enter key

forms

input

bootstrap-tags-input