Firefox的onInput with contentEditable裏面<span>不起作用

Question

我一直在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。

謝謝。

Answer 1

該事件不支持在Firefox中進行內容搜索。這很可能會在未來，但現在，你將不得不採取攔截各種其他事件的更笨拙的方法。您的選項是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突變事件是異步的編輯內容。