zoukankan      html  css  js  c++  java
  • input textbox tag





    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>
  • 相关阅读:
    array_map()与array_shift()搭配使用 PK array_column()函数
    Educational Codeforces Round 8 D. Magic Numbers
    hdu 1171 Big Event in HDU
    hdu 2844 poj 1742 Coins
    hdu 3591 The trouble of Xiaoqian
    hdu 2079 选课时间
    hdu 2191 珍惜现在,感恩生活 多重背包入门题
    hdu 5429 Geometric Progression 高精度浮点数(java版本)
    【BZOJ】1002: [FJOI2007]轮状病毒 递推+高精度
    hdu::1002 A + B Problem II
  • 原文地址:https://www.cnblogs.com/zhanjun/p/5830222.html
Copyright © 2011-2022 走看看