如何使用 Bootstrap 标签输入插件 [英] How to use Bootstrap Tags Input plugin

问题描述

我正在尝试使用 Bootstrap Tags Input plugin 而没有 Typeahead.我已经包含了以下文件:

<link href="../../tagsinput/css/bootstrap-tagsinput.css" rel="stylesheet" type="text/css"><script src="../../tagsinput/js/bootstrap-tagsinput.min.js"></script>

脚本如下:

使用插件的部分JSP表单:

<label for="tagPlaces" class="col-sm-2 control-label">标记地点</label><div class="col-sm-10"><input type="text" class="form-control" data-role="tagsinput" id="tagPlaces">

但是我看不到输入字段中的标签.当我按回车键输入标签时，我的表单也被提交.请建议我缺少什么以及使用插件的正确方法是什么.

解决方案

我就是这样做的

没有更多的javascript

CSS
您可以包含原始引导标签输入 css 文件

或者你可以只使用这个

.bootstrap-tagsinput {背景色:#fff;边框:1px 实心 #ccc；box-shadow: 插入 0 1px 1px rgba(0, 0, 0, 0.075);显示:块；填充:4px 6px；颜色:#555；垂直对齐:中间；边框半径:4px；最大宽度:100%；行高:22px；光标:文本；}.bootstrap-tagsinput 输入 {边界:无；框阴影:无；大纲:无；背景色:透明；填充:0 6px；边距:0；宽度:自动；最大宽度:继承；}

和 HTML

I am trying to use Bootstrap Tags Input plugin without Typeahead. I have included following files:

<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../../tagsinput/css/bootstrap-tagsinput.css" rel="stylesheet" type="text/css">
<script src="../../tagsinput/js/bootstrap-tagsinput.min.js"></script>

The script is as below:

<script>
    $('#tagPlaces').tagsinput({
        allowDuplicates: true
    });
</script>

Part of JSP form where using the plugin:

<div class="form-group">
        <label for="tagPlaces" class="col-sm-2 control-label">Tag Places</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" data-role="tagsinput" id="tagPlaces">
        </div>
</div>

But I am not able to see the tags in the input field. Also my form is getting submitted as I press enter for the tag. Please suggest what am I missing and what is the correct way of using the plugin.

解决方案

This is how i did it

<script src="../js/bootstrap-tagsinput.js"></script>
no more javascript

Css
You can include the original bootstrap tags input css file

<link rel="stylesheet" href="../css/bootstrap-tagsinput.css">

Or you can just use only this

.bootstrap-tagsinput {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    display: block;
    padding: 4px 6px;
    color: #555;
    vertical-align: middle;
    border-radius: 4px;
    max-width: 100%;
    line-height: 22px;
    cursor: text;
}
.bootstrap-tagsinput input {
    border: none;
    box-shadow: none;
    outline: none;
    background-color: transparent;
    padding: 0 6px;
    margin: 0;
    width: auto;
    max-width: inherit;
}

And HTML

<input type="text" value="" data-role="tagsinput" id="tags" class="form-control">

这篇关于如何使用 Bootstrap 标签输入插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！