本文介绍了如何使用Bootstrap标签输入插件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用不带Typeahead的 Bootstrap标签输入插件.我包含以下文件:
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>
脚本如下:
<script>
$('#tagPlaces').tagsinput({
allowDuplicates: true
});
</script>
使用插件的JSP表单的一部分:
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>
但是我无法在输入字段中看到标签.另外,当我按Enter键输入标签时,我的表单也将提交.请建议我缺少什么,以及使用该插件的正确方法是什么.
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.
推荐答案
这就是我的做法
<script src="../js/bootstrap-tagsinput.js"></script>
no more javascript
CSS
您可以包含原始引导程序标签输入的CSS文件
Css
You can include the original bootstrap tags input css file
<link rel="stylesheet" href="../css/bootstrap-tagsinput.css">
或者您只能使用此
.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;
}
和HTML
<input type="text" value="" data-role="tagsinput" id="tags" class="form-control">
这篇关于如何使用Bootstrap标签输入插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!