Почему Edge маскирует обработчик события onchange, когда вход имеет обработчик события input, который изменяет значение входа? - PullRequest
Новая
       17

Почему Edge маскирует обработчик события onchange, когда вход имеет обработчик события input, который изменяет значение входа?

1 голос
/ 24 сентября 2019

В этом HTML 

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title></title>

    </head>

  <body>

    Enter some number here:
    <input  type="number" min="0" 
          oninput="console.log(' on input '); 
          this.value = Math.abs(this.value);"
          onchange="console.log(' on change');"/>

  </body>
</html>

На входе есть 2 обработчика событий

  • вход
  • change

Однако возможен обменне вызывается.

Обратите внимание, что обработчик oninput изменяет значение ввода.Если я удаляю 

this.value = Math.abs(this.value);

, запускаются оба события.

Такое поведение наблюдается в Microsoft Edge 44.17763.1.0 (Microsoft EdgeHTML 18.17763)

Этого не происходит ни в Chrome, нив Firefox.

Вопросы

  1. Что я делаю не так?
  2. Это из унаследованной большой базы кода со многими входами, все свход и обмен.Обмен не называется.Какой самый эффективный способ исправить это?(Отказ от ответственности: я не эксперт по HTML / javascript.)

1 Ответ

1 голос
/ 24 сентября 2019
Событие

oninput аналогично событию onchange . Разница в том, что событие oninput происходит сразу после изменения значения элемента, тогда как onchange происходит, когда элемент теряет фокус, после изменения содержимого.

Я пытаюсь проверитьВаш пример кода с браузером MS Edge, Chrome и Firefox, и я могу создать проблему с браузером MS Edge.

Похоже, браузер MS Edge работает немного по-другому.

Я заметил, что есливы пытаетесь написать код JS в головной части, чем он может помочь решить эту проблему.

Пример: 

<!DOCTYPE html>
<html>
<body>
<input  type="number"   onchange="myFunction1(this.value)" oninput="myFunction(this.value)" />
<p id="demo"></p>
<p id="demo1"></p>

<script>
function myFunction(val) {
  document.getElementById("demo").innerHTML = "oninput " + val; 

}
function myFunction1(val) {
  document.getElementById("demo1").innerHTML = "onchange " + val; 
}
</script>

</body>
</html>

Вывод в браузере MS Edge:

enter image description here

Пользователь должен нажать клавишу ВВОД или нажатьв другом месте после изменения значения для запуска события.

...