Question

我有一个HTML页面，其中包含用于获取标记的文本字段。我使用 Bootstrap标记输入 来获取所有需要的标记。它工作正常。但问题是：它不适用于第一种类型！

这是我的代码：

＆＃13;

<head>
        <title></title>
    
    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">
        
    
    
    
    </head>
    <body>
    <input type="text" id="Tags" class="form-control"/>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
        
        <script>
          $(document)
                .on('keypress',
                    '#Tags',
                    function (event) {
                        if (event.keyCode == 13) {
                            event.preventDefault();
                        }
                        $(this).tagsinput({
                            confirmKeys: [13, 32, 44]
                        });
                    });
        </script>  
        
        
    </body>

＆＃13;

当我尝试输入文本字段时，它不会输入文本字段并调整其大小。但同样，在关注相同的文本字段之后，我将能够输入。

https://jsfiddle.net/AfsanehDaneshi/p525yuyk/

Answer 1

您无需在tagsInput库中使用自定义处理程序。

您可以使用以下内容：

$('#Tags').tagsinput({
   confirmKeys: [13, 32, 44]
});

请参阅updated jsFiddle

Answer 2

使用＆＃34; keyup＆＃34;而不是＆＃34;按键＆＃34; 它工作正常！

Answer 3

我遇到了同样的问题。这是我的解决方案：

HTML

<div id="div-tags">
     <input type="text" id="tags" name="tags" data-role="tagsinput" />
</div>

JavaScript

$('#tags').on('itemAdded', function(event) { 
     $('#div-tags .bootstrap-tagsinput .tag').css('display','inline'); 
});

Bootstrap标签输入插件不适用于第一种类型

3 个答案: