4

我有一个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

如果我然后 reset contenteditable=true，这些折叠的行将被恢复。

我猜这与<p>IE 的使用有关，有什么想法可以防止线条在什么时候被折叠contenteditable=false？

4

1 回答 1

1

您可以尝试通过按 ENTER 并添加BR而不是<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以后使用时会造成麻烦。要删除退格，只需将它们替换""为 RegExp：

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

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

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

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

于 2012-05-17T13:25:05.160 回答