<label for="tag" style="font-size:20px;">标签</label>
<input id="tag" type="text" name="tag" class="form-control" placeholder="输入关键词,单击回车添加标签"/>
<div class="col-sm-12 question-tag" style="min-height:60px;">
<ul id="tag-ul" class="clearfix" style="margin:0;padding-left:5px;">
</ul>
</div>
question.js代码
$(function(){
/*标签添加验证*/
$("#tag").keydown(function(event){
var tag=$("#tag").val();
var tagAdd="<li class='alert alert-success alert-dismissible'><span class='tag-name'>"+tag+"</span><button type='button' class='close' data-dismiss='alert' style='position: relative;padding:0;'>×</button></li>";
var test=1;
if(event.keyCode==13){
if(tag==""){}
else{
$(".tag-name").each(function(){
if(tag==$(this).text()){
test=0;
}
})
if(test==1){
if($("#tag-ul").children("li").length<5){
$(".tag-alert").remove();
$("#tag-ul").append(tagAdd);
$("#tag").val("");
}
else{
$(".tag-alert").remove();
var alert="<span class='tag-alert'>最多添加五个标签</span>";
$(".question-tag").append(alert);
}
}
else{
$(".tag-alert").remove();
var alert="<span class='tag-alert'>您已经添加过该标签,请输入其他标签。</span>";
$(".question-tag").append(alert);
}
}
}
})
})
原理很简单,获取键盘事件,如果是回车将文本框里的内容加入到列表中,并加入一些必要的检验就行了,CSS修饰的代码这里不给出,只是样子,自己做就行