Как моментально обновлять форму?

Question

[Erl]

Доброго времени суток.
Использую событие change() на форму, при изменении inputoв в ней и расчета, но проблема в том, что обновляется форма после того как уйдет фокус, можно ли как то на лету обновлять?

Answer 1

[Андрей Охотников]

В данном случае нужно вместо change использовать input
Вот пример - данные инпутов хранятся в state

<form >
  <input data-input="1">
  <input data-input="2">
  <input data-input="3">
</form>

const inputs = document.querySelectorAll('input')
const state = {
  input1: null,
  input2: null,
  input3: null,
}

inputs.forEach(item => {
  item.addEventListener('input', function(e) {
    state[`input${this.dataset.input}`] = e.target.value
  })
})

Comments

[Erl]

у меня 3 инпута

[Андрей Охотников]

Эрлан Капаров, разницы нет, добавил код в ответ

[Erl]

Андрей Охотников, всё спасибо, ваш ответ помог, я затупил конкретно)

Answer 2

[Alex]

https://learn.javascript.ru/events-change#sobytie-input

Comments

[Erl]

у меня 3 инпута, как мне все 3 отслеживать?
не уже-ли нет способа моментально хватать изменения формы?

[Alex]

function onFormChange (event) { /* ... */}

document.querySelectorAll('form input').forEach(input => input.oninput = onFormChange)

[Erl]

Александр Козак, спасибо, чет затупил хД

[Erl]

Александр Козак, зациклился на id и сидел как идиот, думал как бы мне все айдишники перечислить что бы input отслеживать

Answer 3

[Антон Федорян]

События клавиатуры