javascript - Firefox的onInput和<span>内的contentEditable不起作用

我一直在鬼混onInput和contentEditable，试图制作一个可以自动显示某些数学求和的脚本。该概念的一部分是使输入随着用户键入的增加而增加，我发现使用contentEditable与<span>标记配合得很好。我所做的大多数测试都是在Google Chrome上进行的，并且似乎可以在其中运行，但是onInput似乎在Firefox（4.0）中不起作用。 onKeyUp可在Firefox中使用，但不能立即显示为onInput。

<div id="f">
    <span oninput="go()" id="p" class="x" contenteditable="true">0
    </span>
    % of
    <span oninput="go()" id="n" class="x" contenteditable="true">0
    </span>
    =
    <span id="r" class="x" contenteditable="true">0
    </span>
    <p id="a"></p>
</div>

function go() {
    p = document.getElementById('p').innerHTML;
    n = document.getElementById('n').innerHTML;
    r = document.getElementById('r');
    a = document.getElementById('a');
    r.innerHTML = p / 100 * n;
    a.innerHTML = p + "% of " + n + " equals " + p / 100 * n;
}

看看the script over at jsFiddle。

谢谢。

最佳答案

Firefox中的contentedit不支持input事件。可能会在将来出现，但就目前而言，您将不得不采用笨拙的方法来拦截各种其他事件。您的选项是keypress，keyup，mouseup，paste，cut和copy的组合，或更简单的是，如果您可以忽略IE DOM mutation events。拦截DOMNodeInserted，DOMNodeRemoved和DOMCharacterDataModified应该可以解决问题：

document.addEventListener("DOMNodeInserted", go, false);
document.addEventListener("DOMNodeRemoved", go, false);
document.addEventListener("DOMCharacterDataModified", go, false);

您需要了解的一件事是，在WebKit中，DOM突变事件对于可编辑内容是异步的。