<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修飾的程式碼這裡不給出，只是樣子，自己做就行