OnInput Firefox с contentEditable внутри <span>не работает - PullRequest
Новая
       20

OnInput Firefox с contentEditable внутри <span>не работает

1 голос
/ 28 апреля 2011

Я дурачился с onInput и contentEditable, пытаясь создать скрипт, который бы автоматически показывал сумму некоторой математики.Часть концепции заключалась в том, чтобы увеличить ввод по мере того, как пользователь печатал, что, как я обнаружил, очень хорошо работает с тегом <span> с помощью contentEditable.Большинство тестов, которые я проводил, были на 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;
}

Посмотрите на скрипт на jsFiddle .

Спасибо.

1 Ответ

4 голосов
/ 28 апреля 2011

Событие input не поддерживается для contenteditable в Firefox.Вероятно, это произойдет в будущем, но сейчас вам придется обойтись более неуклюжим методом перехвата различных других событий.Ваши варианты представляют собой комбинацию keypress, keyup, mouseup, paste, cut и copy или более просто, если вы можете игнорировать IE <= 8, <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents"> события мутации DOM .Перехват DOMNodeInserted, DOMNodeRemoved и DOMCharacterDataModified должен помочь: 

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

Одна вещь, о которой вам нужно знать, это то, что в WebKit события мутации DOM асинхронны для редактируемого контента.*

...