<!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>
