contentEditable div中的跨度标签需要按键事件

Question

我的html代码中包含以下div：

<div id="expanderInput" tabIndex="1" contentEditable></div>

我使用contentEditable div作为制作自动扩展文本框的一种简单的跨浏览器方法。我还在对用户输入此div的内容进行输入验证。应该是用逗号分隔的电子邮件地址列表。当用户尝试提交不正确的信息时，我的Javascript将输入分块，并以红色突出显示所有不正确的块。

//split the address into the comma-separated chunks
var chunks = splitForward(forwardsTo);

//Grab each bad chunk one at a time and stick it in a span with a red-colored text
for(var i = 0; i < invalids.length; i++)
{
    var current = chunks[invalids[i]];
    current = '<span class="highlighted">' + current + '</span>';
    chunks[invalids[i]] = current;
}
$("#expanderInput").html(chunks.join());
initHighlighted();

数组'invalids'保存所有坏块的索引。到目前为止，一切都正常。但是，一旦用户开始在红色文本中输入内容，我就需要红色消失，而只是在该范围内。例如，如果有两个坏块，每个坏块都以红色突出显示，并且用户开始修复其中一个，则另一个需要保持红色。

我尝试将事件侦听器附加到跨度：

initHighlighted = function()
{
    $(".highlighted").keypress(function()
    {
        alert("It works!");
    });
};

但是事件永远不会发生，即使用户用红色编辑文本。使用浏览器开发人员的工具，我可以看到事件处理程序在那里，它永远不会启动。是div上的contentEditable属性导致接收事件的跨度吗？我也尝试过自己制作跨度contentEditable，但是行为仍然相同。

Answer 1