按键事件未捕获ES6中的目标值

时间:2016-06-29 09:26:56

标签: javascript events ecmascript-6

我一直在向ES6重构一个小的javascript项目,并注意到应用于文本输入的keypress事件侦听器不包括事件目标值中的按下字符。这种行为可以在这个小提琴中看到:

http://jsbin.com/yayinalato/edit?js,console,output

$input = document.querySelector('.input')

$input.addEventListener('keypress', (e) => {
  console.log(e.target.value)
})

keyup事件有效,但这也会捕获非文本输入按键,如箭头键等,这对此不利。这就是为什么我对keypress事件不起作用的原因感到困惑,因为我认为按键必须发生在按键上。

如何获取目标的值以包含从此事件中按下的键?解释如何捕获这些事件会有所帮助。

1 个答案:

答案 0 :(得分:0)

e.target是指触发事件的元素,即输入字段。如果检查e.target.value,则会在触发按键事件时获取输入字段的值。这在文本实际输入字段之前发生。

您需要做的只是使用e.keyCode来检查按下了哪个键。

$input.addEventListener('keypress', (e) => {
  console.log("keypressed " + e.charCode);
})

另请注意,(e)=>仅适用于支持ES6的浏览器,或者您必须使用Babel转换回ES5