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;
}

那好了，这样的话可以编辑了，那么，，真的结束了吗？并不。因为，，，他还有兼容性的问题。笔
4000
者发现，在手机端和谷歌、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可编辑问题，以及他的兼容性问题。希望恩能够帮到各位。