javascript - 在 contenteditable=false 上防止空行在 IE 中折叠

Question

我有一个 contenteditable=true 的 div设置以允许内联编辑(用于 RTE 目的)。

我知道不同的浏览器处理回车键的方式不同，FF 插入 <br>和 IE 插件 <p>

我遇到的问题是跨行输入文本时。

例如文本:

line 1
line 2

line 3


line 4

在FF中，当进入上面然后切换contenteditable=false , 行格式仍然如预期。

但是，当在 IE 中编辑多行文本时，然后设置 contenteditable=false , 任何空行都被折叠。例如:

line 1
line 2   
line 3    
line 4

如果我然后重置 contenteditable=true , 这些折叠的线被恢复。

我猜这与 <p> 的使用有关通过 IE，我可以如何防止这些行在 contenteditable=false 时被折叠？

Answer 1

您可以尝试通过捕获 ENTER 并添加 BR 来解决此 IE 行为而不是 <P>&nbsp;</P> .

pad.addEventListener('keydown',keyDown,false);

function keyDown(e){
    if(e.keyCode!=13) return;
    pad.innerHTML+='<br />\b';
    e.stopPropagation();
    e.preventDefault();
    return false;
}

<div id="pad" contenteditable="true"></div>

诀窍是在行尾添加“\b”(退格键)，否则 IE 不会在用户按下另一个键之前换行。但是，这些退格键在使用 innerHTML 时会造成麻烦。之后。要删除退格键，只需将它们替换为 ""使用正则表达式:

padsInnerHTML=pad.innerHTML.replace(/LITERAL_BACKSPACE_CHARACTER/g,'');

在正则表达式中你需要一个文字退格符，/\b/不会工作。要实际查看退格字符，您可以使用此 keyDown() 在 Opera 中运行您的代码, 在 pad 中写一些字母并按 ENTER并将字符复制粘贴到您的代码中。

请注意，此代码应仅在 IE 中运行，其他浏览器会弄乱换行符。

---

为什么会这样，我不知道。看来，IE 在 <BR /> 之后添加了一些非打印字符，在按 ENTER 后必须删除它以创建即时换行符。