用JQuery实现标签添加

<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;'>&times;</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修饰的代码这里不给出，只是样子，自己做就行