<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-1.10.2.min.js"></script>
<style>
.select-tab {
width: 98.8%;
padding: 0 .6%;
background: #fff;
border: 1px solid #e8e8e8;
margin-top: 27px;
border-radius: 2px;
}
.select-tab span {
height: 20px;
line-height: 1.5;
display: inline-block;
padding: 0 12px;
background: #eee;
font-size: 14px;
color: #4285f4;
margin-right: 10px;
cursor: pointer;
}
.select-tab span:first-child {
margin-left: 0;
}
.select-tab em {
display: inline-block;
width: 7px;
height: 7px;
vertical-align: middle;
background: url(images/close_01.png) no-repeat;
margin-left: 6px;
cursor: pointer;
}
.select-tab input {
min-width: 40%;
line-height: 1.3;
padding: 16px 0;
font-size: 14px;
color: #333;
}
.show-select-tab {
padding: 15px 0;
}
.select-tab input {
border: 0 none !important;
outline: none;
}
</style>
</head>
<body>
<div class="select-tab-bg">
<div class="select-tab">
<div class="show-select-tab pull-left">
</div>
<input type="text" id="" class="for-tag" placeholder="請設置標籤，最多可設置5個，支持，；間隔" maxlength="20" style="display: inline-block;">
<input name="tag" id="" class="toname" type="hidden" value="">
<div class="clear"></div>
</div>
<p class="publish-msg" style="display: none;"></p>
</div>
<div class="select-tab-bg">
<div class="select-tab">
<div class="show-select-tab pull-left">
</div>
<input type="text" id="" class="for-tag1" placeholder="請設置標籤，最多可設置5個，支持，；間隔" maxlength="20" style="display: inline-block;">
<input name="tag" id="" class="toname" type="hidden" value="">
<div class="clear"></div>
</div>
<p class="publish-msg" style="display: none;"></p>
</div>
<script>
function setBlogTag(inName) {//tab
var tag_value = $(inName).next(".toname").val();
var new_value = $(inName).val();
$(inName).val("");
new_value = $.trim(new_value);
var tag_len = new_value.length;
if(tag_len <= 1) {
$(inName).show();
return false;
}
new_value = new_value.substring(0, tag_len-1);
new_value = new_value.replace(/,/g, '');
new_value = new_value.replace(/，/g, '');
var tag_arr = tag_value == '' ? [] : tag_value.split(",");
for (var i = 0; i < tag_arr.length; i++) {
if(tag_arr[i] == new_value) {
$(inName).show();
return false;
}
}
var tag_new_value = tag_value == '' ? new_value : (tag_value + ',' + new_value);
$(inName).next(".toname").val(tag_new_value).change();
var tagHtml = "<span>"+new_value+"<em></em></span>";
$(inName).prev(".show-select-tab").append(tagHtml);
tag_num++;
if(tag_num >= 5) {
$(inName).hide();
} else {
$(inName).show();
}
}
$(function(){
$("body").on("click", '.show-select-tab em', function(){//remove tab
var tag_index=$(this).parent().index();
var tag_value = $(this).parents(".select-tab").find(".toname").val();//alert($(this).parents(".select-tab").find(".toname").val());
var tag_arr = tag_value.split(",");
var tag_new_value = '';
for(var i=0; i< tag_arr.length; i++) {
if(tag_index != i) {
tag_new_value += tag_arr[i] + ",";
}
}
var new_tag_length = tag_new_value.length;
tag_new_value = tag_new_value.substring(0, new_tag_length - 1);
$(this).parents(".select-tab").find(".toname").val(tag_new_value).change();
$(this).parent().remove();
tag_num--;
$(this).parents(".select-tab").find(".for-tag").show();
})
$('.for-tag').bind('keyup',function(e){//tab click
if(e.keyCode == 188 || e.keyCode == 186 || e.keyCode == 59){
setBlogTag('.for-tag')
}
});
$('.for-tag1').bind('keyup',function(e){//tab click
if(e.keyCode == 188 || e.keyCode == 186 || e.keyCode == 59){
setBlogTag('.for-tag1')
}
});
});
</script>
</body>
</html>