javascript - Firefox 的 onInput 与 内的 contentEditable 不工作

Question

我一直在玩弄 onInput 和 contentEditable，试图制作一个可以自动显示某些数学总和的脚本。部分概念是让输入随着用户键入而增长，我发现这与 <span> 配合得很好。使用 contentEditable 的标签。我所做的大部分测试都是在谷歌浏览器上进行的，它似乎在那里工作，但 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 .

谢谢。

Answer 1

Firefox 中的 contenteditable 不支持 input 事件。将来很可能会这样，但是现在，您将不得不使用更笨拙的方法来拦截其他各种事件。您的选项是 keypress、keyup、mouseup、paste、cut 的组合和 copy，或者更简单地说，如果您可以忽略 IE <= 8, DOM mutation events .拦截 DOMNodeInserted、DOMNodeRemoved 和 DOMCharacterDataModified 应该可以解决问题:

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

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