可编辑div的一些方法总结（二）自定义空格和回车事件

版权声明： https://blog.csdn.net/weixin_38500689/article/details/80456120

在可编辑div中空格键是  和 ‘ ’，混合的，由于浏览器只识别第一个 ‘ ’，所以项目中为了后期页面的自适应以及兼容性，决定将空格符统一为&nbsp；同样将回车键产生的不同标签替换为统一的
方法：在键盘事件中

 //是否输入回车
            isEnterkey(e);
            //是否输入换行
            isSpacekey(e);

替换回车的方法

/*按下enter 键 编辑框回车事件  插入br换行，更换浏览器默认插入的div*/
    function isEnterkey(e){
        if(e && e.keyCode == 13){
            //如果當前是列表
            if($('.TextInner').attr('list-layout') == 'true'){
                //找到li 回车自动加入li
            }else{
                var ev = e || window.event;
                var key = ev.keyCode || ev.charCode;
                var sel, rang, br, fixbr, node, inner, tempRange, offset;
                if(ev.preventDefault) {
                    ev.preventDefault();
                } else {
                    ev.returnValue = false;
                }
                if(window.getSelection) {
                    br = document.createElement('br');
                    sel = window.getSelection();
                    rang = sel.rangeCount > 0 ? sel.getRangeAt(0) : null;
                    if(rang === null) {
                        return false;
                    }
                    rang.deleteContents();
                    node = sel.focusNode;
                    inner = false;
                    while(node.parentNode != document.documentElement) { //确定focusNode是否在编辑框内
                        if(node === $('.TextInner')[0]) {
                            inner = true;
                            break;
                        } else {
                            node = node.parentNode;
                        }
                    }
                    if(inner) {
                        if(browser.chrome || browser.safari || browser.firefox) { //chrome、safari內，尾部换行是多添加一个<br type='_moz'>
                            tempRange = rang.cloneRange();
                            tempRange.selectNodeContents($('.TextInner')[0]);
                            tempRange.setEnd(rang.endContainer, rang.endOffset);
                            offset = tempRange.toString().length;
                            if(offset == $('.TextInner')[0].textContent.length && $('.TextInner')[0].querySelectorAll(".Textinner br[type='_moz']").length == 0) { //在行尾且不存在<br type='_moz'>时
                                fixbr = br.cloneNode();
                                fixbr.setAttribute('type', '_moz');
                                rang.insertNode(fixbr);
                            }
                        }
                        rang.insertNode(br);
                    }
                    if(document.implementation && document.implementation.hasFeature && document.implementation.hasFeature("Range", "2.0")) {
                        tempRange = document.createRange();
                        tempRange.selectNodeContents($('.TextInner')[0]);
                        tempRange.setStart(rang.endContainer, rang.endOffset);
                        tempRange.setEnd(rang.endContainer, rang.endOffset);
                        sel.removeAllRanges();
                        sel.addRange(tempRange);
                    }
                } else {
                    rang = document.selection.createRange();
                    if(rang === null) {
                        return false;
                    }
                    rang.collapse(false)
                    rang.pasteHTML('<br>');
                    rang.select();
                }

            }

        }
    }

统一空格：

 //是否是空格
    function isSpacekey(e) {
        if(e && e.keyCode == 32){
            if($('.TextInner').attr('list-layout') == 'true'){
                //列表
                var $textLieles = $('.TextInner').find('li');
                $textLieles.each(function(){
                //当前对象 $(this)


                })
            }else{
                //当前对象  $('.TextInner')[0]
                var ev = e || window.event;
                var key = ev.keyCode || ev.charCode;
                var sel, rang, br, fixbr, node, inner, tempRange, offset;
                if(ev.preventDefault) {
                    ev.preventDefault();
                } else {
                    ev.returnValue = false;
                }
                if(window.getSelection) {
                //在光标位置插入
                    insertHtmlAtCaret(' ');
                }
            }

        }
    }

光标位置插入文本：

 /*光标位置插入文本*/
    function insertHtmlAtCaret(html) {
        var sel, range;
        if (window.getSelection) {
            // IE9 and non-IE
            sel = window.getSelection();
            if (sel.getRangeAt && sel.rangeCount) {
                range = sel.getRangeAt(0);
                range.deleteContents();
                // Range.createContextualFragment() would be useful here but is
                // non-standard and not supported in all browsers (IE9, for one)
                var el = document.createElement("div");
                el.innerHTML = html;
                var frag = document.createDocumentFragment(), node, lastNode;
                while ((node = el.firstChild)) {
                    lastNode = frag.appendChild(node);
                }
                range.insertNode(frag);
                // Preserve the selection
                if (lastNode) {
                    range = range.cloneRange();
                    range.setStartAfter(lastNode);
                    range.collapse(true);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
            // IE < 9
            document.selection.createRange().pasteHTML(html);
        }
    }

判断浏览器的方法：

 //判断浏览器
    (function() {
        window.browser = {};
        if(navigator.userAgent.indexOf("MSIE") > 0) {
            browser.name = 'MSIE';
            browser.ie = true;
        } else if(navigator.userAgent.indexOf("Firefox") > 0) {
            browser.name = 'Firefox';
            browser.firefox = true;
        } else if(navigator.userAgent.indexOf("Chrome") > 0) {
            browser.name = 'Chrome';
            browser.chrome = true;
        } else if(navigator.userAgent.indexOf("Safari") > 0) {
            browser.name = 'Safari';
            browser.safari = true;
        } else if(navigator.userAgent.indexOf("Opera") >= 0) {
            browser.name = 'Opera';
            browser.opera = true;
        } else {
            browser.name = 'unknow';
        }
    })();