Question

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

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

Answer 1

首先，您要映射＆＃39;输入＆＃39;在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();
    };
  });

也是一个FYI，Enter键映射为13，逗号在JS中为188。

Answer 2

转到 tagsinput.js

查找行：

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

在此功能结束之前添加以下内容：

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

Answer 3

Enter键是注册回发表单。这就是为什么一个案例发生的时候，当你进入＆＃39;进入＆＃39;关键是它触发回发＆＃39;事件，以便表单提交。方案：在页面加载时保留标签输入的输入键：

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

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

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时，将在标签分隔符按下事件中调用.preventDefault。将其设置为false。

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

cancelConfirmKeysOnEmpty: false,

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

bootstrap-tagsinput表单按下输入键

6 个答案: