Question

我一直在使用onInput和contentEditable，试图创建一个自动显示数学总和的脚本。部分概念是让输入随着用户输入而增长，我发现使用contentEditable可以很好地使用<span>标记。我做的大多数测试都是在谷歌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。

感谢。

Answer 1

Firefox中不支持input事件。它可能会在未来，但是现在，你将不得不采取更笨重的方法来拦截各种其他事件。您的选项是keypress，keyup，mouseup，paste，cut和copy的组合，或者更简单，如果您可以忽略IE ＆lt; = 8，DOM mutation events。截取DOMNodeInserted，DOMNodeRemoved和DOMCharacterDataModified应该可以解决问题：

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

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

Answer 2

我意识到，这不再是已知html元素的问题，但是，对于没有自定义元素（例如{{ 1}}）。是的，我知道有一种创建此类用户定义元素的正确方法，并非如此，但是无论如何，以下方法都可以工作，并且对于真正的旧浏览器中的已知HTML元素可能是有益的。

我写了一些可以与 any 元素一起使用的代码。它利用事件委托的优势，并跟踪为元素注册的事件。只需在页面中包含以下JavaScript。

<cstm></cstm>

这是怎么回事？我们为 Element 类型的所有对象（或扩展Element的对象）添加了新功能。该函数创建一个委托事件监听器，该监听器使用 document 对象监听事件。为了确保我们的事件仅限于指定的元素，我们会在 documentLevelEvents 数组中跟踪所有已注册的事件。当我们的注册文档侦听器之一听到事件时，它将检查事件数组，以查看它是否与一个或多个注册的元素/事件绑定匹配。对于找到的每个匹配项，它都会运行传递给addDocumentLevelListener函数的函数，并附带事件。

这是jsfiddle，显示了它的作用。

Firefox的onInput与<span>中的contentEditable无法正常工作</span>

2 个答案: