1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>textTag</title> 6 <style> 7 .box{border:1px solid #ddd; overflow: hidden;padding-bottom:10px; cursor:pointer;} 8 .box .list{float:left;} 9 .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;} 10 .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;} 11 .box input{float:left; height:30px; border:none;margin-left: 10px; margin-top:12px; border: none;outline:none} 12 .box div{float:right; margin-bottom:0px;} 13 .box .tip{border:1px solid #eb8c00 !important} 14 </style> 15 </head> 16 <body> 17 <div class="box" id="ccc"></div> 18 <input type="button" value="getValue" onclick="getValue()"> 19 20 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.js"></script> 21 <script> 22 23 (function () { 24 var tag = { 25 26 init: function (cfg) { 27 this.obj = cfg.id; 28 this.reg = cfg.reg; 29 this.createElement(); 30 }, 31 createElement: function () { 32 var oInput = "<input type='text' class='edit' style='border:none' />"; 33 if ($(this.obj).length == 0) throw new Error('元素不存在'); 34 $(this.obj).append(oInput); 35 this.addEvent(); 36 }, 37 addEvent: function () { 38 var _this = this; 39 $(this.obj).click(function () { 40 $(this).find('input').focus().css('border', 'none'); 41 }) 42 $(document).delegate('.edit', 'keyup', function (event) { 43 if (event.keyCode == 13 || event.keyCode == 32) { 44 var txt = $(this).val().trim(); 45 if (_this.reg != '') { 46 var patt = new RegExp(_this.reg); 47 if (!patt.test(txt)) { 48 $(this).addClass("tip") 49 return; 50 } 51 } 52 $(this).removeClass("tip") 53 if (txt != '') { 54 _this.createTag($(this), txt) 55 } 56 $(this).val(''); 57 } 58 }) 59 $(document).delegate('.closed', 'click', function () { 60 $(this).parent().remove(); 61 }) 62 }, 63 createTag: function (obj, txt) { 64 var oP = "<p><a class='closed' href='javascript:;''>x</a><span>" + txt + "</span></p>"; 65 obj.before(oP); 66 }, 67 getvalues: function () { 68 var list = $(this.obj).children("p").children('span'); 69 var content = []; 70 for (var i = 0; i < list.length; i++) { 71 content.push(list[i].innerHTML); 72 } 73 return content.join(',') 74 }, 75 setvalues: function (p) { 76 $(this.obj).find('p').remove(); 77 if (p != null && p.trim() != '') { 78 var ps = p.split(','); 79 for (var i = 0; i < ps.length ; i++) { 80 this.createTag($(this.obj).find('input'), ps[i]); 81 } 82 } 83 } 84 } 85 window.textTag = tag; 86 })(window); 87 88 textTag.init({ 89 id:"#ccc", 90 reg:/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/ 91 }) 92 93 function getValue(){ 94 alert(textTag.getvalues()); 95 } 96 97 98 99 </script> 100 </body> 101 </html>
