粘贴到contentEditable Div会自动插入其他HTML

Question

我正在使用带有contentEditable属性的div来满足我作为扩展文本字段的简单跨浏览器解决方案的需求，但我遇到了一个有趣的问题。

这是div：

<div id="expanderInput" class="inputDiv" contentEditable></div>

这是我在jquery中抓住它的地方：

var forwardsTo = $expanderInput.html();

在大多数情况下，这会返回用户键入div的内容，但是当他们开始粘贴那些东西时会发生奇怪的事情。

例如，当您从Word粘贴时，它将在浏览器中正确显示文本，但它在div中添加了额外的html代码。当我从word粘贴一个电子邮件地址，例如'bob@aol.com'时，这里是它真正插入html的代码：

<P style="MARGIN: 0in 0in 10pt" class=MsoNormal><FONT size=3><FONT face=Calibri>bob@aol.com<o:p></o:p></p>

这在尝试获取用户粘贴的简单文本时会产生问题，因为它还会抓取html代码，从而难以正确解析。

有没有办法限制用户可以粘贴到div中的内容？或者只是这样才能插入简单的文字？

Answer 1

仅抓住.text()怎么样？

var forwardsTo = $expanderInput.text();

这不是一个完美的解决方案，因为您的用户认为他可能会粘贴粗体/斜体文本，并在提交后发现该标记已被删除。也许你可以申请

$expanderInput.text($expanderInput.text());

每次粘贴事件。这将立即剥离标记。