<div>Something</div> <div>Something</div>
看起来像(在contentEditable DIV)：
Something Something
但是在消毒(移除< div>)后，我得到这样：
SomethingSomething
在Firefox中，contenteditable是：
Something <br> Something
并且在消毒后看起来是一样的：
Something Something
有没有任何解决方案，以“正常化”跨浏览器？
我发现这个代码在Make a <br> instead of <div></div> by pressing Enter on a contenteditable
$(function(){
$("#editable")
// make sure br is always the lastChild of contenteditable
.live("keyup mouseup",function(){
if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
this.appendChild(document.createChild("br"));
}
})
// use br instead of div div
.live("keypress",function(e){
if (e.which == 13) {
if (window.getSelection) {
var selection = window.getSelection(),range = selection.getRangeAt(0),br = document.createElement("br");
range.deleteContents();
range.insertNode(br);
range.setStartAfter(br);
range.setEndAfter(br);
range.collapse(false);
selection.removeAllRanges();
selection.addRange(range);
return false;
}
}
});
});
这工作，但(在SAFARI和CHROME)，我必须按两次“返回”键得到一个新的行…
任何想法？
编辑：我找到的代码(在这个问题的底部)是工作正常，除了“确保一个< br>元素总是lastChild的功能。任何想法如何解决这个？
编辑2：我在控制台得到这个错误：Uncaught TypeError：Object#< HTMLDocument>没有方法“createChild”
编辑3：好的，我改变了document.createChild(“br”); to document.createElement(“br”);我想我的工作在FF / Safari / Chrome …所有返回< br>为新行…
现在的问题是，当我在一个有序或无序列表，我需要一个新的行，没有< br> …
编辑4：如果任何人感兴趣的解决方案的最后一次编辑：Avoid createElement function if it’s inside a <LI> element (contentEditable)
解决方法
这不是一个完美的黑客，但它的工作原理：它添加一个空白后你的BR，以便它正确显示。
但是，你会看到只添加一个空格“”不会改变任何东西，它可以与其他字母。浏览器不会显示它，可能是因为它像html页面中的空白空间，它根本不是什么意思。为了摆脱这个bug，我创建了一个与jQuery的div，包括一个&标签，我采取的text()属性将其放在textnode否则它不工作。
$editables = $('[contenteditable=true]');
$editables.filter("p,span").on('keypress',function(e){
if(e.keyCode==13){ //enter && shift
e.preventDefault(); //Prevent default browser behavior
if (window.getSelection) {
var selection = window.getSelection(),br = document.createElement("br"),textNode = document.createTextNode("\u00a0"); //Passing " " directly will not end up being shown correctly
range.deleteContents();//required or not?
range.insertNode(br);
range.collapse(false);
range.insertNode(textNode);
range.selectNodeContents(textNode);
selection.removeAllRanges();
selection.addRange(range);
return false;
}
}
});
