Значение .value HTMLInputElement невозможно просмотреть с помощью наблюдателей за мутациями.

Введите здесь.

HTML:

<input placeholder="HRM"/>

JavaScript:

let input = document.querySelector('input')

let observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes') {
      //let value = mutation.target.value
      console.log(mutation)
      console.log(mutation.attributeName)
    }
  })
}).observe(input, {
  attributes: true
})

input.placeholder = 'asdfsd'
input.value = "Y U NO FIRE"

При изменении атрибута placeholder срабатывает Mutation Observer. Но при изменении атрибута value Mutation Observer не срабатывает. У кого-нибудь есть твердое понимание, почему? (Надеюсь, подкреплено ссылкой на стандарты ECMAScript/HTML5.)

Кто-нибудь знает, как мы можем отслеживать, когда JavaScript вносит изменения в HTMLInputElement value через input.value?


javascript html html-input mutation-observers
person geoyws    schedule 19.12.2016    source источник
comment
потому что значение в настоящее время является свойством, а не атрибутом?   -  person Kaiido    schedule 19.12.2016
comment
Спасибо @Kaiido ... это то, что мне нужно уточнить ... есть ссылки на авторитетный источник?   -  person geoyws    schedule 19.12.2016
comment
на мобильном телефоне, но попытаюсь выяснить это, да. Но в основном заполнитель, как и стиль, при изменении также меняет атрибут, в то время как это не относится к значению.   -  person Kaiido    schedule 19.12.2016
comment
это здесь: html.spec.whatwg.org /multipage/ ну абзац перед значением, но то же самое для отмеченного.   -  person Kaiido    schedule 19.12.2016

Ответы (1)


arrow_upward
0
arrow_downward

Mutation Observer будет наблюдать за изменениями в DOM, но когда вы вводите текст внутри ввода, если вы проверяете элемент DOM, изменений не происходит. Поэтому нам нужно вызвать это изменение.

Вы можете сделать это, установив для входного атрибута вставленное значение. См. код ниже.

let input = document.getElementById('inp');
let result = document.getElementById("result");

let observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes') {
      result.innerHTML = mutation.target[mutation.attributeName];
    }
  })
}).observe(input, {
  attributes: true
});

input.oninput = () => {
  input.setAttribute("value", input.value);
}
<input placeholder="HRM" value="" id="inp" />

<p>Mutation observer result:<br />
  <div id="result"></div>
</p>

person Mario Andrade    schedule 09.03.2018