MutationObserver не может наблюдать за текстовой областью

Я пытаюсь добавить пользовательские операции отмены к элементу textarea с помощью объекта MutationObserver. Я посмотрел на MDN, как использовать этот объект, и, насколько мне известно, я использую его правильно. Однако ни одна из мутаций не регистрируется - я хочу наблюдать всякий раз, когда изменяется текст в текстовой области.

function initObserver() {
    var editorObserver = new MutationObserver(function(mutations) {
        console.log("MUTATION");

        mutations.forEach(function(mutation){
            console.log(mutation.type);
        });
    });

    var editorObserverConfig = { characterData: true };

    var editor = document.querySelector("#editor");

    editorObserver.observe(editor, editorObserverConfig);
}

initObserver();

Что может быть не так с этим кодом?


javascript mutation-observers
person NmdMystery    schedule 13.11.2015    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Самый простой подход - использовать событие oninput

var editor = document.querySelector("#editor");
editor.oninput = function(e) {
  // do stuff
}
person guest271314    schedule 13.11.2015
comment
Я думаю, это подходит для того, что я делаю. - person NmdMystery; 13.11.2015
comment
Есть ли альтернатива вводу, которая больше похожа на текстовый редактор? IE, вместо прослушивания каждого символа, существует ли событие, которое объединяет символы и срабатывает один раз? - person NmdMystery; 13.11.2015
comment
Есть ли событие, которое объединяет персонажей и срабатывает один раз? Пробовали onchange событие ? Каков ожидаемый результат? - person guest271314; 13.11.2015
comment
onchange срабатывает только в том случае, если фокус теряется из текстовой области. Я хочу, чтобы действие отмены вело себя нормально, когда последним действием вводился обычный текст, но переопределяло то, что происходит при нажатии табуляции (среди прочего, вставляйте символ табуляции вместо перехода между элементами). Если я слушаю события вкладок и события ввода, я получаю много событий ввода, и я не знаю, как предсказать, что браузер собирается с ними делать, поэтому я не могу просто удалить их все сразу. - person NmdMystery; 13.11.2015
comment
Не уверены, что правильно интерпретируете требование? Заменить символы в textarea oninput ? Пробовали console.log(e) в обработчике oninput? Можно попробовать использовать e.preventDefault(), e.keyCode для фильтрации нажатой клавиши, замены символов? - person guest271314; 13.11.2015
comment
Ваш ответ может быть хорошей альтернативой вышеуказанной проблеме, но реальный вопрос был в том, что не так с данным кодомmutationObserver? Я столкнулся с той же проблемой с мутацией. Наблюдайте за всеми другими мутациями, но не работает с characterData. - person iamatulK; 01.01.2020

arrow_upward
6
arrow_downward

Чтобы ответить на ваш вопрос, что не так с этой мутацией кода, наблюдатели наблюдают за изменениями в DOM. Изменения значения элемента формы не отражаются в DOM, поэтому не вызовет срабатывание наблюдателя мутаций.

Короче говоря, в этом коде нет ничего плохого. Но вы не меняете DOM, когда вводите текст в текстовую область.

person AtheistP3ace    schedule 13.11.2015
comment
Но свойство characterData предназначено для обнаружения изменений в тексте внутри узла в соответствии с этим... developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/ У меня есть пример туториала, в котором работает characterData, вы можете посмотреть здесь codepen.io/impressivewebs/pen/aXrzex?editors=0011 - person iamatulK; 01.01.2020
comment
Символьные данные @iamatulK не совпадают со свойством value. Свойство value не отражается в DOM. CharacterData узла есть, но опять же characterData не совпадает со свойством value элемента DOM. Вы не можете использовать наблюдателей мутаций для отслеживания изменений значений. - person AtheistP3ace; 21.01.2020
comment
@iamatulK Как я уже сказал в ответе, изменения значения элемента формы не отражаются DOM, но в вашем примере используется элемент абзаца, редактируемый содержимым. Это два совершенно разных сценария. Содержимое узла отличается от свойства value элемента формы. - person AtheistP3ace; 21.01.2020