Clear input text field in Angular2 with ESC key

Question

I have an form with several text-input fields. I'd like that when the user presses the ENTER key, you jump to the next input field (keeping the text introduced, same behaviour as with the tab key) and when you press the ESC key you clear the input field.

The ESC key is the same as this question, but for Angular2, not AngularJS.

It is also similar to this one, but with the keyboard, not with a button.

My idea to do it was the following:

<input type="text" formControlName="whatever" id="whatever" 
   class="form-control" autocomplete="off" (keyup)="onKey($event)" required>

and then in the .ts:

  public onKey(event: { key: string; }) {
    if (event.key === 'Enter') {
      I DON'T KNOW WHAT TO DO (1);
    }
    if (event.key === 'Escape' || event.key === 'Esc') {
      I DON'T KNOW WHAT TO DO (2);
    }
  }

where I DON'T KNOW WHAT TO DO (1) should "focus on the following input/button" and I DON'T KNOW WHAT TO DO (2) "should clear the cell and focus out".

The event.key === 'Escape' || event.key === 'Esc' is to consider both Chrome and IE. I still have to check other options for different browsers, but if you have suggestions, they'll be appreciated too! ;-).

If I should split my question into two different questions (one for the ENTER, one for the ESC), let me know it and I'll do it. Thanks!

UPDATE: I found this question, but the answer relies on the nextElementSibling which does not work in my case (the input fields are not siblings). I also found this similar question but some of the elements involved are deprecated already.

score 2 · Answer 1 · edited May 08 '19 at 16:17

2

You should be using (keyup.enter) or keyup.escape to achieve this functionality and keep your operations separate:

<input type="text" formControlName="whatever" id="whatever" 
   class="form-control" autocomplete="off" (keyup.enter)="keyTab($event)" 
   (keyup.escape)="onKeyEscape($event)" required>

In your component:

getControlName(name): any { return this.form.get(name); }
onKeyEscape(event) {
     // get the form control from your form and reset it 
   this.getControlName(event.target.getAttribute('formControlName')).reset();
   event.srcElement.blur();
  }

keyTab(event) {
    let element = event.srcElement.nextElementSibling; // get the sibling element

    if (element !== null){  // / focus if not null
       element.focus();
    } else {
         return;
    }
  }

edited May 08 '19 at 16:17

xavier

1,860
4
18
46

answered May 08 '19 at 15:13

nircraft

8,242
5
30
46

About the Escape: it works great. I added the `blur()` to focusout. About the Enter: the `nextElementSibiling` doesn't find the following `input`element, but any other element. My `input`s, actually, are not siblings and I can't go from one to the following one using this method. It has to be improved but it's certainly in the right direction! Thank you! – xavier May 08 '19 at 16:10
@xavier, you can tweak the enter function to find next formelement, using Id or any other selector and achieve the desired result. Please accept the answer if you feel it's working. – nircraft May 08 '19 at 16:13
Tomorrow I'll try to fix it and, if it works (and I guess it will) I'll accept it and I'll upvote it (I can't vote today, no votes left!).Thanks! – xavier May 08 '19 at 16:37
Hi, I tried to tweak the enter function but I found it was not so straightforward. I didn't manage to solve it, actually. I upvote the answer because of the ESC button and the `keyup.enter` idea, but I don't accept it yet, since it doesn't work completely. I update the question with some new elements I found in my research – xavier May 10 '19 at 14:18

Clear input text field in Angular2 with ESC key

1 Answers1