knockout.js 如何在TypeScript中检测按下的键？

4nkexdtk 于 2022-11-10 发布在 TypeScript

关注(0)|答案(5)|浏览(121)

typescript中的语法与javascript中的下面一行在语义上等效的语法是什么？

// Some knockout event handler
myFunc(data: string, evt: Event) {
    // If enter or tab key up were detected add the excuse to the collection
    if (evt.enterKey || evt.which == 9) {
        // Do Something
    }
}

我遇到的问题是，与常规javascript事件不同，typescript Event类没有enterKey或which属性。那么，我如何在不出现typescript编译错误和难看的红色波浪形下划线的情况下检测到按下了哪个键呢？

knockout.js

来源：https://stackoverflow.com/questions/24108197/how-to-detect-key-pressed-in-typescript

5条答案

按热度按时间

h9a6wy2h1#

您需要使用更专门的事件类型KeyboardEvent，如下所示：

myFunc(data : string, evt : KeyboardEvent)

如果你还想删除evt.enterKey的错误，你需要通过扩展接口来添加它--尽管我不知道这是一个真实的的属性，因为它不是技术上的一个控制键，比如CTRL、SHIFT或ALT，它们都有关于事件的属性：

interface KeyboardEvent {
    enterKey: boolean;
}

赞(0）回复(0）举报 2022-11-10

62o28rlo2#

对于React用户

private onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    console.log(e.key)
  }

其中，HTMLDivElement是onKeyDown所附加到的元素的类型。
下面是所有支持的HTML元素的列表（从第32-90行）。

赞(0）回复(0）举报 2022-11-10

wydwbb8l3#

您需要注册事件，例如：

class EventHandler {
    static RegisterKeyPress(input: string){
        document.getElementById(input).addListener('keypress', (e: KeyboardEvent) =>{
           //You have yout key code here
            console.log(e.keyCode);
        }
    }
}

快乐编码！

赞(0）回复(0）举报 2022-11-10

7bsow1i64#

在React中：
声明全局接口：

declare global {
  interface WindowEventMap {
    keydown: KeyboardEvent<HTMLInputElement>
  }
}

那就用吧：

const handleUserKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {
    const { key } = event
      if (key === "Escape") {
        // do something
      }
  }

  useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress)

    return () => {
      window.removeEventListener('keydown', handleUserKeyPress)
    }
  })

赞(0）回复(0）举报 2022-11-10

7ivaypg95#

我正在分享我的经验。希望这对某人有用。
如果您使用的是EventListener，则不能简单地将KeyboardEvent作为参数传递。我使用了as关键字来减少类型错误。

myElement.addEventListener('keydown', (e) => {
    if ((e as KeyboardEvent).key === 'Enter') {
        // do something..
    }
});

赞(0）回复(0）举报 2022-11-10

我来回答

knockout.js 如何在TypeScript中检测按下的键？

5条答案

相关问题

热门标签

最新问答