Question

我创建<div contenteditable="true"></div>

我想要的行为是：

在文本行

周围输入按键= 

Shift-Enter键在文本行

后按=  

为了在Firefox中获得我想要的行为，我尝试创建以下“keypress”事件：

function(ev) {
  if (ev.keyCode == '13') {
    document.execCommand('formatBlock', false, 'p');
    document.execCommand('insertBrOnReturn',false,false);
  }
  return false;
}

但Firefox（截至33.1.1）坚持在第一次输入时插入 （然后将其包含在我的段落中）。我理解它的某种程度，当一条线是空的但是我不明白为什么一旦将一个字符插入到新行中就不会删除它。

例如，假设我键入：

hello<enter>goodbye

进入可编辑字段，我将得到以下标记（使用上面的事件处理程序）

<p>hello</p>
<p>goodbye<br></br></p>

 确实会在我再次点击输入时消失，但之后我会留下以下标记

<p>hello</p>
<p>goodbye</p>
<p><br></br></p>

这有两个问题：

用户不一定会点击第二个输入，在“再见”后留下“隐形” 
或者，用户将点击第二个输入并以包含 的基本冗余行结束。

事实上，我唯一可以看到的方式

<p>hello</p>
<p>goodbye</p>

即。我想要的是使用以下序列hello<enter>goodbye<enter><backspace>，这看起来非常荒谬。

此时我应该说我个人喜欢Firefox作为浏览器，我强烈希望继续使用它，但是对于我们的业务来说，干净的编辑标记至关重要，而在Chrome中，使用上述方法（不包括insertBrOnReturn）会产生所需的标记（上面的按键事件功能可以干净地切换Chrome以使用p而不是标准div）

所以我处于一个困难的位置，我欢迎来自其他Firefox爱好者的任何意见，如果确实有可能如何优雅地实现上述目标（请不要投入时间提供复杂的黑客，尽管我们不太可能使用它们 - 在我有限的经验中，复杂性与可靠性截然相反）

提前感谢您的帮助！

（PS - 在使用此功能后，我真的不确定Chrome div实现是否更好 - 请参阅下面的评论）

满意的br / p / div古怪

0 个答案: