javascript - 检测按键输入字段中输入的字符

Question

问题:如何检测按键/按下后要插入输入字段的字符？

背景:我正在创建一个输入字段，该字段会随着用户键入而动态扩展和收缩。为了流畅地执行此操作，我需要在渲染 Angular 色之前立即重绘。为了重绘到正确的宽度，我需要知道即将插入的字符。使用 keyup 然后使用 .val() 会创建一个抖动的界面，因为在文本向右移动之前宽度不会改变。

探索的方法:

这就是我现在正在使用的，但它并没有成功，因为它不是一个准确的映射，尤其是对于特殊字符。

        // Convert the keypress to the appropriate letter
        self.lastLetter = String.fromCharCode(e.keyCode);
        self.lastLetter = e.shiftKey?self.lastLetter:self.lastLetter.toLowerCase();

Answer 1

我写了一个名为 keysight 的模块将 keypress、keydown 和 keyup 事件分别转换为字符和键。

Keysight 重新运行具有 char 属性和 key 属性的对象。 char 属性表示正在键入的字符，它考虑了大写字母。 key 属性表示键盘上的键，不表示大写或小写 - 仅表示键。

示例:

 element.addEventListener("keydown", function(event) {
    var character = keysight(event).char
    if(character === 'w') {
      console.log("got lower case w")
    } else if(character === 'W') {
      console.log("got upper case W")

      var key = keysight(event).key
      console.log("keysight(event).key is still lower case "+key)
    }
 })