CODEWITHSUNDEEP
jqueryhtmleventsaureliakeycode
Aamir Hussain
Aamir Hussain

Reputation: 141

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

I am working in Aurelia and I want to submit or cancel form by pressing function F4 and F10.My code is working fine under (window,document,element) but these are covering complete project body .I want to cover only specific area like as DIV container.When user press key from keyboard then event should be trigger.

I tried different solutions but nothing work in my scenario.(keydown,keyup or keypress) are not working if i target DIV id instead of element and getting error is that "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");
}

when user press F4 or F10 then event should be triggered

Upvotes: 0

Views: 471

Answers (1)

avrahamcool
avrahamcool

Reputation: 14094

I've created a simple demo for you: here

the demo is in JS, but you can convert it fairly easily back to TS. notice multiple point:

  1. you don't have to hook the events manually from the TS/JS code, you can use .delegate instead - this is the easy and right way to do it.

  2. because of point #1, you don't have to bind the id anymore.

  3. for a div to capture keyboard events, it has to be targetable. you can achieve that by adding tabindex="0" to the div. it will also add some styling when the div is selected - but we can fix that in 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");
  }
}

Upvotes: 2

Related Questions