在Aurelia中根据HTMLDIV的基数捕获KeyCode并触发事件

Question

我在 Aurelia 工作，我想通过按功能 F4 提交或取消表单，F10.My 代码在 (window,document,element) 下工作正常，但这些涵盖了完整的项目正文。我只想覆盖特定区域，例如 DIV container.When 用户按下键盘上的键，然后应该触发事件。

我尝试了不同的解决方案，但在我的场景中没有任何效果。如果我将目标 DIV id 而不是元素作为目标，则（keydown、keyup 或 keypress）不起作用，并且得到的错误是 "Event Listener is not a function"

HTML

<template>
  <div class="container-fluid"  id.bind="abc">
First Name: <input type="text" ></br>
Last Name : <input type="text"></br>
 <div >
          <div class="col s12 right-align">
            <button  click.delegate="cancel()" >Cancel</button>
            <button  click.delegate="submit()" >Submit</button>
          </div>
        </div>

TS

private abc: any;
constructor(){
this.abc = "customer-div";
}

attached() {
   let __this = this;
     var myDIV = $("#" + __this.abc) as any;  
    (myDIV).addEventListener('keydown', this.handleKeyInput, true);
  }

  deactivate() {
let __this = this;
     var myDIV = $("#" + __this.abc) as any;
    myDIV.removeEventListener('keydown', this.handleKeyInput, true);
  }

 handleKeyInput = (event: { keyCode: number; }) => {

    console.log("Event is ", event);
    if (event.keyCode == 121) {
      this.submit();
    }
    else if (event.keyCode == 115) {
      this.cancel();
    }
  }
submit(){
console.log("form submitted");
}
cancel(){
console.log("Form cancelled");
}

当用户按下 F4 或 F10 时应该触发事件

Answer 1

我为您创建了一个简单的演示：here

演示在 JS 中，但您可以很容易地将其转换回 TS。注意多点：

您不必从 TS/JS 代码中手动挂钩事件，您可以使用 .delegate 代替 - 这是简单且正确的方法。
由于第 1 点，您不必再绑定 id。
对于 div 捕获键盘事件，它必须是 targetable。您可以通过将 tabindex="0" 添加到 div 来实现。当 div 被选中时，它还会添加一些样式 - 但我们可以在 css.

<template>
  <style>
  div[tabindex]{
    outline: none;
  }
  </style>
  <div tabindex="0" keydown.delegate="handleKeyInput($event)">
    First Name: <input type="text"></br>
    Last Name : <input type="text"></br>
    <div class="col s12 right-align">
      <button  click.delegate="cancel()" >Cancel</button>
      <button  click.delegate="submit()" >Submit</button>
    </div>
  </div>
</template>

export class App {
  handleKeyInput(event) {
    if (event.keyCode === 121) {
      this.submit();
    } else if (event.keyCode === 115) {
      this.cancel();
    } else {
      return true;
    }
  }

  submit() {
    console.log("form submitted");
  }
  cancel() {
    console.log("Form cancelled");
  }
}

在Aurelia中根据HTMLDIV的基数捕获KeyCode并触发事件

Capture KeyCode and trigger event by base of HTML DIV in Aurelia

html

jquery

events

keycode

aurelia