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可编辑问题，以及他的兼容性问题。希望恩能够帮到各位。