aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAb8AAAB0CAIAAACaKavmAAAJ0klEQVR4nO3dO2wb5wHA8YOHIkOLrkUmXYEC3dihKEwU7NCppIcsWjh1KAK2MGkJyKCBUyejsh5xC4hBWxSII8mKB3Vk28iK5BgtYlhGJVFvUaIeieNKtgzogTiSrA7Hu/vu48ej+B1pPvL/4QPCO96Dlui/7kE5xgUAoHpGo18AALQk6gkAOqgnAOigngCgg3oCgA65nnkAwCUo6nl2dnYOAPClqOf5+XkdD3YBoC1QTwDQQT0BQAf1BAAd1BMAdFDPZnH65X+OJrsPRq7uv//W/vtvHYxcPZrs/qbwSaNfFwA16tl4Zy9Wjqbe2//j9/b6DGnsD37n8H7ydG+u0a8RgIx6Ntjrbw5f/O3Hpd0Ux/M/d7z++qDRrxSAB/VssKOp9/zTaY3DT37X6FcKwEOnnk/39xg1GV8t/eMy6bTGq81s3d4GAKqmWc/jmdvHjwcZAcfLe7+8fD0PJ67X7W0AoGq69Xw8ePKolxFwvPjrjy5fz4OPflq3twGAqlHPhtbzLz/0JvLmqfNVfnZTvv9++7u1//4D0EU9G1pPxbHnzdOLi/P1dxTHnnd+Ure3AYCqUc9Gjpdjvyit56tnT84vnpwobrv/tm5vAwBVo56NHIf/etebyHdeHV2cfm6dv8sBfbX29zq9CQBooJ4NHi9Hf36pG+7//M3F67O6vQ0AVI16Nngc//v3+3/6foXfNcr84Pxkr27vAQA63mA9MxHD6Bgal+ZYvPMVo2coZBjxRJnNiiLZRgex2nE02f1yNLzXf6XcUefp08/r9gYAoOkN1TOX7pArOd4ZLpYukTTKlLE4EkkrjNIy453hS84svoCSRgvlDad7fNKsfram4zD764Phnz3/4O29/it7/Veef/D2wcjVr57cqdu3HkAgDTv2zMb9iymNkmPPTMTnMDOX7khmvOuWHuGOd4btDVpx9yayuJawnTc9jh8PPt3nhB1oUi1az0TSk85i6cLpnpNHPUOhSPZRz1C8MyduYbwz7K1nNi0uIG3f2mCDLwLUqp6GIX+XAQRXu3pap8yGkcx4ypWN25cjnXraSxrC+XhxsVBnLhNxD/fsJcPphFi3bFzsYCJpHzbmMhH3tD3TKR9p+l5dFWuuPs1XDPuSgvcQ1b5MUXqlwkhmvBcxnC+F6gcJ9QSaWc3q6RQtGzeMULGeQpKs0JQ59nROou3ESL0rFsfZlHSQ6ExmIoaw+pB40l2hnomk+6x1HbbTPt8vd9EzkbT3JdZW/HNl4/YfWb7A2jMUMoxQR9j6Qokvm3oCLaJW9ewZCjl//+1jT++lSemAzlPPTMQJ7knx2LNnKCRmS7izJB6ceq8G5NId7h6rqmcm4u5rvDNsGOFQRAx3adpy6Q73NTsllfcivGzxB4P3Z4wYYuoJtIqaHXs6p6tOBbx98b/uaZ8Clw2Ke4yZS0fsjci3krxFvvyZeyJZ/nWW+0iA+rptyaeysnH7+in1BNpLTe8aOVfxQp05ORCV7xrZV0idg7hK9ZSW8UxWvmskbNl7d0hZQDmU6s+fll4wdb8I1BNoL7U7c3dq5bk9IqTEp57CybidFemIT6iVc1Dp2aD3Lrl4Ju5bT+8NKLdlwurSNQQxlGJ2E8l4onjWLyzs/jGpJ9Beannd066GcwcmkXRPxqUPXVq3TdxrnU6JcukO+xhTuODo3HWJJ9wLmkKPsvGOZNy+UCBeRfUeF0uFysa9c+yIe7pf7oOl0sfy7XXdO0VSsivVszTQ1BNoZrU89szalz6lOzDFaKbVn1gKp3tOMpFkxvn0j5sq51y+eAe8mKqeoXRCWkD4JJBwyzst3Pp3OBsJGTKhucKnjqQbX/K1Ammn3t25x8LOrGRG3HUkK2xECij1BJpZa/4rIeJt9zLD++tGLTmoJ9DMWrOepSfdJel8A7+ZTj2Bb7NWreeJ+GEgcWQipafALTqoJ9DMWrieJ496xd+VLL3+2OqDegLNrNXr2c6DegLNjHo276CeQDOjns07qCfQzKhn8w7+dWSgmVHP5h3UE2hmuvWcuX38eJBR3zFzm3oCTUuznow3Nur2rQcQiE49AQDUEwB0UE8A0EE9AUAH9QQAHdQTAHRQTwDQQT0BQAf1BAAd1BMAdFBPANBBPQFAB/UEAB3UEwB0KOp5dnZ2DgDwpagnAKAiuZ7d3yZ1PKYH0O4U9dzZ2fmy3e3s7FBPAEEo6rm7u/u/dre7u0s9AQShPvZ81u449gQQEPUEAB2Kem5tbT1td1tbW9QTQBCKehYKhUbf1Km7QqFAPQEEoajn5ubmF7V1r9u8Nvjwi4eD10yz+17p8w8Hr5nXBh+WWdv/WT2bm5vUE0AQinpubGzs1tbH3WZs4LPd3d3PBmLFR9LTZvfHZddWrxTMxsYG9QQQhKKe+Xx+p6IHAzHT0jUwEDNjAw/k+fa8sS57RtfYzgNxWXcNe5awtumZaT0e6zLNrjHFeord+svn89QTQBCKeq6vr29XMNZlmrH+6e3t7e3p/phpT0z3x+zZ1jJdY/ZD1exte31rero/5j413R8r3apnXXd2ud36WF9fp54AglDUc21tbcvf3S4z1j8tTFmT3tnCtOeJ6f6Y2XVXvSlBMYmeR3e7THdVZ3bZ3fpYW1ujngCCUNRzdXW14GuqL2reGPVMRvumClN9UVMW7ZsqFAqjN4oPLMKk9Exxlndte/vWU86OK+/Wx+rqKvUEEISinisrK5u+Pu2LmjdGPZPRvk+d/5YaveF9wt6AtKFiN61F3a25j6x6Xnq3PlZWVqgngCAU9VxeXt7wN5Iyo7cmhSlrciRlmqmRistvbGxM3oqaqRFptndy8la0OOk+8uzAmV12tz6Wl5epJ4AgFPVcWlqq9O/aDadMM9p7P5/P5+/3Rk174n5v1DRTw8JC1sRwyl7aswVhWe/y9tPuVku3P5yquFsfS0tL1BNAEOp6rlc00WtfbUz19kbN1HBxvpW94jP2zHU7hhPeDbgLyCtHeyesQk9YS9qrCrsdHk65W1TvtjzqCSAgRT0XFxfXqjHxh1+ZyY+qWqXhFhcXqSeAIBT1XFhYWPV3J2mayTuqiVaxsLBAPQEEoahnLpdbqeTD6+6Z8vUPKy7edHK5HPUEEISinvPz88vtbn5+nnoCCEJRz7m5uaV2Nzc3Rz0BBKGo5+zs7GK7m52dpZ4AglDUc2Zm5r/tbmZmhnoCCIL/nzsA6JDrCQC4DOoJADqoJwDooJ4AoIN6AoAO6gkAOqgnAOigngCgg3oCgA7qCQA6qCcA6KCeAKCDegKADuoJADqoJwDooJ4AoIN6AoAO6gkAOqgnAOigngCgg3oCgA7qCQA6qCcA6KCeAKCDegKADuoJADr+D8FaMrbKBHhMAAAAAElFTkSuQmCC" alt="" />
1 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textTag</title>
<style>
.box{border:1px solid #ddd; overflow: hidden;padding-bottom:10px; cursor:pointer;}
.box .list{float:left;}
.box p{float:left; padding:5px; background-color:rgba(235, 140, 0, 0.46); border:1px solid #e7eceb; margin:9px 10px 0; position:relative; margin-left:10px;}
.box p a{ display:block; width:15px; height:15px; background:#eb8c00; font-size:8px; position:absolute; text-align:center; line-height:17px; color:#fff; text-decoration:none; border-radius:10px; right:-5px; top:-5px;}
.box input{float:left; height:30px; border:none;margin-left: 10px; margin-top:12px; border: none;outline:none}
.box div{float:right; margin-bottom:0px;}
.box .tip{border:1px solid #eb8c00 !important}
</style>
</head>
<body>
<div class="box" id="ccc"></div>
<input type="button" value="getValue" onclick="getValue()">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.js"></script>
<script>
(function () {
var tag = {
init: function (cfg) {
this.obj = cfg.id;
this.reg = cfg.reg;
this.createElement();
},
createElement: function () {
var oInput = "<input type='text' class='edit' style='border:none' />";
if ($(this.obj).length == 0) throw new Error('元素不存在');
$(this.obj).append(oInput);
this.addEvent();
},
addEvent: function () {
var _this = this;
$(this.obj).click(function () {
$(this).find('input').focus().css('border', 'none');
})
$(document).delegate('.edit', 'keyup', function (event) {
if (event.keyCode == 13 || event.keyCode == 32) {
var txt = $(this).val().trim();
if (_this.reg != '') {
var patt = new RegExp(_this.reg);
if (!patt.test(txt)) {
$(this).addClass("tip")
return;
}
}
$(this).removeClass("tip")
if (txt != '') {
_this.createTag($(this), txt)
}
$(this).val('');
}
})
$(document).delegate('.closed', 'click', function () {
$(this).parent().remove();
})
},
createTag: function (obj, txt) {
var oP = "<p><a class='closed' href='javascript:;''>x</a><span>" + txt + "</span></p>";
obj.before(oP);
},
getvalues: function () {
var list = $(this.obj).children("p").children('span');
var content = [];
for (var i = 0; i < list.length; i++) {
content.push(list[i].innerHTML);
}
return content.join(',')
},
setvalues: function (p) {
$(this.obj).find('p').remove();
if (p != null && p.trim() != '') {
var ps = p.split(',');
for (var i = 0; i < ps.length ; i++) {
this.createTag($(this.obj).find('input'), ps[i]);
}
}
}
}
window.textTag = tag;
})(window);
textTag.init({
id:"#ccc",
reg:/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
})
function getValue(){
alert(textTag.getvalues());
}
</script>
</body>
</html>
