JS-可自由编辑的span 

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

 

posted @ 2017-05-03 17:38  天蝎座  阅读(400)  评论(0)    收藏  举报