//TODO:编辑TAG
<!DOCTYPE html>
<html>
<head>
<title>Testing Page</title>
<style>
/*外围包裹DIV样式*/
.tag-list-wrapper
{
position: relative;
padding: 5px;
border: 1px #BFBFBF solid;
border-right-color: #E2E2E2;
border-bottom-color: #E2E2E2;
font-size: 13px;
color: #999;
width:400px;
}
/*单个标签,A元素*/
.tag-list-item
{
position: relative;
float: left;
height: 22px;
line-height: 22px;
overflow: hidden;
border: 1px #A9D789 solid;
border-radius: 2px;
background: #B7E498;
margin: 0 5px 5px 0;
padding: 0 15px 0 5px;
color: black;
white-space: nowrap;
}
/*删除图标,B元素*/
.tag-list-del
{
position: absolute;
margin-left:5px;
top: 8px;
right: 4px;
width: 7px;
height: 6px;
background: url(ico_deltag.png) no-repeat;
overflow: hidden;
cursor: pointer;
border:1px solid #B7E498;
}
.tag-list-del:hover
{
border:1px solid #fff;
}
.tag-input-zone,.tag-input-zone:focus
{
border:none;
height:22px;
width:120px;
line-height:22px;
outline:none;
}
</style>
<script src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" language="javascript">
$.tagList = function (hidden, settings) {
if (!hidden) return;
var max = settings && settings.max ? settings.max : 5;
var objs = {
trim: function (str) { return str.replace(/(^\s*)|(\s*$)/g, ""); },
addTag: function (input) {
var wrapper = $(input.parentNode);
//不允许超过最大标签个数
if (wrapper.find('.tag-list-item').length >= max) {
input.value = '';
return;
}
//如果快速地按下空格可能会导致一些问题,所以需要去除全部空格
var tagName = objs.trim(input.value);
if (!tagName) {
input.value = '';
return;
}
//不允许重复,检验标签是否存在
if (wrapper.find('.tag-list-value[tag-value="' + tagName + '"]').length) {
input.value = '';
return;
}
//加入新标签
var newTag = ['<a class="tag-list-item"><em class="tag-list-value" title="编辑" tag-value="'];
newTag.push(tagName);
newTag.push('">');
newTag.push(tagName);
newTag.push('</em><b title="删除" class="tag-list-del">*</b></a>');
$(input.parentNode).find('.tag-list-container').append(newTag.join('')).find('.tag-list-del').click(function () { objs.removeTag(this) });
//清除输入
input.value = '';
input.focus();
this._updateHidden(wrapper);
},
removeTag: function (t) {
//输入框内按下退格,清除最后一个标签
if (t.tagName == 'INPUT') {
$(t.parentNode).find('.tag-list-item:last-child').remove();
this._updateHidden(t.parentNode)
}
//点击删除图标
else {
this._updateHidden($(t).parents('.tag-list-wrapper')[0], t);
}
},
//更新隐藏文本
_updateHidden: function (wrapper, b) {
var newVal = [];
if (b) {
wrapper.children[0].removeChild(b.parentNode);
}
$(wrapper).find('.tag-list-value').each(function () {
newVal.push(this.innerHTML);
});
document.getElementById(hidden).value = newVal.join(',');
}
};
$('#' + hidden).after('<div class="tag-list-wrapper"><span class="tag-list-container"></span><input type="text" class="tag-input-zone" placeholder="在此输入标签" /></div>')
.next('.tag-list-wrapper').find('.tag-input-zone').keydown(function (e) {
//按下空格添加标签,需要处理快速连续的按下过个空格
if (e.which == 32) {
objs.addTag(this);
}
//按下回车添加标签,阻止默认的表单提交操作
else if (e.which == 13) {
objs.addTag(this);
return false;
}
//按下退格删除标签
else if (e.which == 8) {
//如果input的value为空则触发删除标签事件,如果不为空则执行默认动作
if (this.value.trim() == '') {
objs.removeTag(this);
}
}
});
};
$(function () {
$.tagList('myText', { max: 10 });
$.tagList('txt', { max: 10 });
});
</script>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<h1>Build your own tag list</h1>
<input type="text" id="myText" name="myText" />
<input type="text" id="txt" name="myText" />
</form>
</body>
</html>
====
删除-
小图标