div之“可编辑”属性,按下“回车键”之后出现的兼容性问题的处理办法

昨天在写到一个文字输入框的时候，发现了一个问题，就是往输入框内输入表情的时候，textarea不支持dom中的插入等属性，最后没办法，在网上找到了div的一个属性，即contenteditable=”true”,让原本的div具备了可编辑的属性。
好了，废话不多说，开始甩代码。

HTML：

<div class="textarea" contenteditable="true" id="edit-div"></div>

CSS：（因为作者是手机端，所以用rem布局的，你们换成px可以很直观的看效果）

.textarea{
    width: 2.35rem;
    min-height: 0.41rem;
    box-shadow: 0 0 0.04rem #cecece;
    padding: 0.1rem 0.09rem;
    box-sizing: border-box;
    border-radius: 5px;
    line-height: 0.18rem;
    font-size: 0.14rem;
    background: white;
}

那好了，这样的话可以编辑了，那么，，真的结束了吗？并不。因为，，，他还有兼容性的问题。笔者发现，在手机端和谷歌、ie、等浏览器上，按下回车的时候，在这个div中会自动生成div或者p，而我们需要的是生成br标签，已达到换行的目的。火狐浏览器一切正常。那接下来我们就来解决这个问题。

JS :

<script type="text/javascript">
    window.onload = function() {
        var EditDiv = {
            focus: false //确定当前焦点是否在编辑框内
        };
        document.getElementById('edit-div').onfocus = function(e) {
            EditDiv.focus = true;
        }
        document.getElementById('edit-div').onblur = function(e) {
            EditDiv.focus = false;
        }
        document.getElementById('edit-div').onkeydown = function(e) {
            var ev = e || window.event;
            var key = ev.keyCode || ev.charCode;
            var sel, rang, br, fixbr, node, inner, tempRange, offset;
            if(key == 13) {
                if(ev.preventDefault) {
                    ev.preventDefault();
                } else {
                    ev.returnValue = false;
                }
                if(window.getSelection) {
                    if(EditDiv.focus === false) {
                        return false;
                    }
                    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 === this) {
                            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(this);
                            tempRange.setEnd(rang.endContainer, rang.endOffset);
                            offset = tempRange.toString().length;
                            if(offset == this.textContent.length && this.querySelectorAll("#edit-div 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(this);
                        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() {
        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';
        }
    })();
</script>

到此为止，解决了div可编辑问题，以及他的兼容性问题。希望恩能够帮到各位。