Question

我在Aurelia工作，我想按功能F4和F10提交或取消表格。我的代码在（窗口，文档，元素）下工作正常，但是这些覆盖了整个项目主体。我只想覆盖特定的项目像DIV容器这样的区域。当用户按下键盘上的键时，应该触发事件。

我尝试了不同的解决方案，但在我的方案中无济于事。（如果我将DIV id定位为元素而不是目标DIV且出现错误是“事件侦听器不是函数”，则无法使用keydown，keyup或keypress）

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中的HTML DIV捕获KeyCode和触发事件

1 个答案: