Question

我有一个设有contenteditable=true的div，以便允许内联编辑（用于RTE目的）。

我知道不同的浏览器处理输入键的方式不同，FF插入 和IE插入

我遇到的问题是跨越各行输入文字。

例如文字：

line 1
line 2

line 3


line 4

在FF中，当输入上述内容然后切换contenteditable=false时，行格式仍然按预期方式进行。

但是，在IE中使用多行文本进行编辑，然后设置contenteditable=false时，任何空白行都会折叠。 e.g：

line 1
line 2   
line 3    
line 4

如果我重置contenteditable=true，则会恢复这些折叠的行。

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

Answer 1

您可以尝试通过捕获ENTER并添加BR而不是 来解决此IE行为。

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/将不起作用。要实际查看退格符，可以使用此keyDown()在Opera中运行代码，写一些字母并在pad中按Enter键并将字符复制粘贴到代码中。

请注意，此代码应仅在IE中运行，其他浏览器将使用换行符。

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

在contenteditable = false上防止空行在IE中崩溃

1 个答案: