<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .selval { display: inline-block; *display: inline; *zoom: 1; float: left; width: 213px; min-height: 25px; } .selval .selone { position: relative; display: inline-block; *display: inline; *zoom: 1; padding: 2px; margin-right: 12px; } .editorSpan { min-width: 12px; min-height: 22px; line-height: 22px; padding-left: 2px; padding-right: 2px; max-width: 212px; word-break: break-all; display: inline-block; *display: inline; *zoom: 1; float: left; text-align: left; border: 1px solid #ccc; } .editorSpan:focus { outline: #ccc auto 0px; } .del_icon { cursor: pointer; height: 15px; width: 15px; visibility: hidden; position: absolute; top: 3px; right: -12px; font-style: normal; } </style> </head> <body> <div class="selval"></div> <button onclick="addOne()">新加</button> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> var EditorSpan = { InitAllEditSpan: function() { $(".selone").unbind(); $('.del_icon').unbind(); $('span.editorSpan').unbind(); //------------- 显示SPAN: del按钮 -------------// $(".selone").mouseenter(function(e) { var $dom = $(e.target); if (e.target.tagName == "I") { $dom = $dom.parent(); } else if (e.target.tagName == "SPAN") { $dom = $dom.parent(); } $dom.find(".del_icon").css("visibility", "visible"); }); $(".selone").mouseleave(function(e) { var $dom = $(e.target); if (e.target.tagName == "I") { $dom = $dom.parent(); } else if (e.target.tagName == "SPAN") { $dom = $dom.parent(); } $dom.find(".del_icon").css("visibility", "hidden"); }); //移除SPAN $(".del_icon").click(function(e) { var $dom = $(e.target); var $fdom = $dom.parent().parent(); $dom.parent().hide(); $dom.parent().remove(); }); //------------- 编辑 SPAN 内容 -------------// var eventStyle = "click"; var browserStyle = navigator.appName; if (browserStyle == "Microsoft Internet Explorer") { eventStyle = "focus"; } //开启SPAN, 可编辑内容 $("span.editorSpan").on(eventStyle, function(event) { var $dom = $(event.currentTarget); $dom[0].contentEditable = true; $dom.css("border", "1px solid #e55"); $dom[0].focus(); }); //离开SPAN, 关闭编辑内容 $("span.editorSpan").on("blur", function() { $(this).css("border", "1px solid #ccc"); $(this)[0].contentEditable = false; verifyOpe.cklength(this.innerHTML, $(this)); }); } } var verifyOpe = { cklength: function(txt, $dom) { console.log(txt); } } function addOne() { var deldom = '<i class="del_icon" title="移除" >×</i>'; $(".selval").append( '<div class="selone"><span class="editorSpan"></span>' + deldom + '</div>' ); EditorSpan.InitAllEditSpan(); } function browerVersion() { var agent = navigator.userAgent.toLowerCase(); var regStr_ie = /msie [d.]+/gi; var regStr_ff = /firefox/[d.]+/gi var regStr_chrome = /chrome/[d.]+/gi; var regStr_saf = /safari/[d.]+/gi; var browserNV = ""; //IE if (agent.indexOf("msie") > 0) { browserNV = agent.match(regStr_ie); } //firefox if (agent.indexOf("firefox") > 0) { browserNV = agent.match(regStr_ff); } //Chrome if (agent.indexOf("chrome") > 0) { browserNV = agent.match(regStr_chrome); } //Safari if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) { browserNV = agent.match(regStr_saf); } browserNV = browserNV.toString(); //other if ("" == browserNV) { browserNV = "Is not a standard browser"; } //Here does not display "/" if (browserNV.indexOf('firefox') != -1 || browserNV.indexOf('chrome') != -1) { browserNV = browserNV.replace("/", ""); } //Here does not display space if (browserNV.indexOf('msie') != -1) { //msie replace IE & trim space browserNV = browserNV.replace("msie", "ie").replace(/s/g, ""); } //return eg:ie9.0 firefox34.0 chrome37.0 return browserNV; } addOne(); </script> </html>