forms - 按回车键提交的引导标签输入表单

Question

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

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

Answer 1

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

为了增加一点冗余，我还将输入键重新映射到输入字段中的逗号，以确保这一点。

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

尝试这个：

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

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[type=text]').on('keydown', function (e) {
   if ( event.which == 13 ) {
           $(this).blur();
           $(this).focus();
           return false;
      }
 });

Answer 5

回车键是注册回发表单。这就是为什么发生了这样一种情况，当您点击“输入”键时，它会触发“回发”事件，因此表单会进入已提交状态。解决方案：在页面加载时保留标签输入的回车键：

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

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

Answer 6

cancelConfirmKeysOnEmpty 选项默认设置为 true，但当设置为 false 时，会在标签分隔符 keydown 事件上调用 .preventDefault。将其设置为假。

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

cancelConfirmKeysOnEmpty: false,

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