自动填充

var TagHelper = {
initCategory: function (tagData) {
$("#categoryInput").html('<input id="categoryText" maxlength="7" style="width: 150px;" value="" onfocus="if(this.value==\'输入多个标签时，标签之间请用逗号分开\'){this.value=\'\';this.className=\'inp-txt inp-txt-active\'}" />');
for (var b = 0,
a = tagData.length; b < a; b++) {
if (b > 10) {
return
}
this.createCategory(tagData[b])
}
},
createCategory: function (str) {
if (str == "") return;
_self = this;
var bflag = true;
$.each($("span.categoryItem"), function (i, v) {
if ($(v).text() == str) {
bflag = false; return;
}
});
if (bflag == false)
return;
$('<span class="categoryItem">' + str + '<span class="delItem"></span></span>').insertBefore('#categoryText');
//获取焦点
//$("#categoryText").focus();
this.SaveTag();
$('.delItem').unbind("click"); //移除click
$(".delItem").click(function (event) {
$(this).parent().remove();
_self.SaveTag();
if ($("span.categoryItem").size() < 5) {
$('#categoryText').unbind("keyup"); //移除keyup
$('#categoryText').unbind("blur"); //移除keyup
if ($("#categoryText").size() == 0)
$("#categoryInput").append('<input id="categoryText" maxlength="7" style="width: 150px;" />');
$("#categoryText").focus();
TagHelper.bindkeydown();
}
});
if ($("span.categoryItem").size() >= 5) {
$("#categoryText").remove();
}
},
SaveTag: function () {
var tags = "";
$.each($("span.categoryItem"), function (i, v) {
tags += $(v).text() + ",";
});
tags = tags.substring(0, tags.length - 1);
$("#tags").val(tags);
},
bindkeydown: function () {
$("#categoryText").keyup(function (event) {
var keycode = event.which;
if (keycode == 188 || keycode == 59 || keycode == 186) {
if ($(this).val().length > 1) {
var e = new RegExp(/[\uff0c]/g);
var n = new RegExp(/[，]/g);
if (n.test($("#categoryText").val())) {
$("#categoryText").val($("#categoryText").val().replace(/([，][，]+)/g, "，")),
$("#categoryText").val($("#categoryText").val().replace(/(^[，]*)|([，]*$)/g, ""));
}
var n = new RegExp(/[,]/g);
if (n.test($("#categoryText").val())) {
$("#categoryText").val($("#categoryText").val().replace(/([,][,]+)/g, ",")),
$("#categoryText").val($("#categoryText").val().replace(/(^[,]*)|([,]*$)/g, ""));
}
var tagtemp = $(this).val();
TagHelper.createCategory(tagtemp); //tagtemp.substring(0, tagtemp.length - 1)
$("#categoryText").val(""); $("#categoryText").focus();
}
else {
$("#categoryText").val(""); $("#categoryText").focus();
}
return false;
}

//
});
// $("#categoryText").keydown(function (event) {
// var keycode = event.which;
// if (keycode == 188 || keycode == 59 || keycode == 186) {
// if ($(this).val().length == 1) {
// $("#categoryText").val("");
// }
// return false;
// }
// else {
// if ($(this).val().length == 1 && $(this).val() == "，") {
// $("#categoryText").val(""); return false;
// }
// }
// });
$("#categoryText").blur(function (event) {
var n = new RegExp(/[，]/g);
if ($(this).val().length > 0) {
if (n.test($("#categoryText").val())) {
$("#categoryText").val($("#categoryText").val().replace(/([，][，]+)/g, "，")),
$("#categoryText").val($("#categoryText").val().replace(/(^[，]*)|([，]*$)/g, ""));
}
var n = new RegExp(/[,]/g);
if (n.test($("#categoryText").val())) {
$("#categoryText").val($("#categoryText").val().replace(/([,][,]+)/g, ",")),
$("#categoryText").val($("#categoryText").val().replace(/(^[,]*)|([,]*$)/g, ""));
}
var tagtemp = $(this).val();
TagHelper.createCategory(tagtemp);
$("#categoryText").val("");
}
});
}
};

function loadlabel() {
var tagData = $("#tags").val().split(",");//["日本漫画"];
TagHelper.initCategory(tagData);
TagHelper.bindkeydown();
}
//$(function () {
// var tagData = $("#tags").val().split(",");//["日本漫画"];
// TagHelper.initCategory(tagData);
// TagHelper.bindkeydown();
//});

 

<p class="mb20">
标签<span class="fs12">（精辟、简短的标签，更有助于信息的精准推送，每个标签最多7个字，最多5个）</span>
<br />
<div class="editWrap" style="width: 800px">
<div class="categoryInputWrap">
<input id="tags" name="tags" value="" type="hidden" runat="server" />
<div class="categoryInput" id="categoryInput">
<input id="categoryText" maxlength="7" style="width: 120px;" />
</div>
</div>
</div>
</p>