событие нажатия клавиши не регистрирует входное значение при первом запуске события - PullRequest
Новая
       29

событие нажатия клавиши не регистрирует входное значение при первом запуске события

2 голосов
/ 22 мая 2019

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

document.addEventListener('DOMContentLoaded', () => {
  const input = document.querySelector('input');
  input.addEventListener('keypress', e => {
    console.log(e.target.value);
  });
});
<input type="text" />

Это заставляет его работать, хотя я передаю 0 мс. 

document.addEventListener('DOMContentLoaded', () => {
  const input = document.querySelector('input');
  input.addEventListener('keypress', e => {
    setTimeout(() => console.log(e.target.value), 0);
  });
});
<input type="text" />

почему это?

Ответы [ 4 ]

3 голосов
/ 22 мая 2019

Когда вы впервые нажимаете key на входе , значение, назначенное этому входу, составляет empty в момент, когда происходит событие keypress, тогда символ добавляется к вход позже. То же самое верно для будущих событий keypress, значение прочитанного вами input является предыдущим до изменения input. Кроме того, если вы читаете на MDN , появляется предупреждение об удалении keypress. Возможно, вы захотите прослушать keyup событие вместо: 

const input = document.querySelector('input');

input.addEventListener('keyup', e => {
    console.log(e.target.value);
});
.as-console {background-color:black !important; color:lime;}
<input type="text" id="input">
2 голосов
/ 22 мая 2019

keypress событие не меняет ввод value - вы прочитали «старое» значение - текущий ключ находится в e.key

document.addEventListener('DOMContentLoaded', () => {
  const input = document.querySelector('input');
  input.addEventListener('keypress', e => {
    console.log('value',e.target.value);
    console.log('key',e.key);
  });
});
<input>

Вы можете использовать onkeyup событие, чтобы иметь текущее значение в event.target.value

document.addEventListener('DOMContentLoaded', () => {
  const input = document.querySelector('input');
  input.addEventListener('keyup', e => {
    console.log('value', e.target.value);
    console.log('key', e.key);
  });
});
<input>

Входное значение будет обновлено до выполнения функции setTimeout (даже в течение 0 мс) - ключевое слово: js цикл обработки событий

1 голос
/ 22 мая 2019

Согласно jQuery docs :

Событие нажатия клавиши отправляется элементу, когда браузер регистрируется ввод с клавиатуры. Это похоже на событие keydown, за исключением того, что модификатор и непечатаемые ключи, такие как Shift, Esc и триггер удаления события нажатия клавиш, но не события нажатия клавиш. Другие различия между в зависимости от платформы и браузера могут возникнуть два события.

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

Событие oninput - это событие, которое запускается всякий раз, когда ввод меняется.

Таким образом, keypress будет запущен до изменения значения, используйте keyup вместо

О setTimeout, когда вы поместите коды в это место, это будет асинхронная функция (даже в течение 0 мс). В javascript асинхронная функция будет выполняться после завершения всех синхронных команд

0 голосов
/ 22 мая 2019

Это потому, что он срабатывает до обновления входного значения.Вы можете попробовать использовать keyUp вместо keyPress.

...