我在SAFARI/CHROME上使用contenteditable
时遇到了换行问题。当我在一个可编辑的<div>
中按下“回车”键时,它们会创建一个新的<div>
而不是像Firefox一样创建一个<br>
标签:
<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浏览器中需要按两次“Return”键才能换行... 有什么想法吗?编辑:使用我找到的代码(见本问题底部)可以正常工作,除了一个“确保
<br>
元素始终是lastChild”的函数之外...有什么解决方法吗?编辑2:我在控制台上得到了这个错误:
Uncaught TypeError: Object #<HTMLDocument> has no method 'createChild'
编辑3:好的,我把document.createChild("br");
改成了document.createElement("br");
,我认为它在FF / Safari / Chrome中都可以工作...所有的回车都会返回<br>
...问题现在是当我在有序或无序列表中时,我需要在没有
<br>
的情况下换行...编辑4:如果有人对最后一次编辑的解决方案感兴趣:Avoid createElement function if it's inside a <LI> element (contentEditable)