Override Default Tab Key press event in Lightning component?

Question

I am trying to override the default tab key press event. For other key this custom method is getting called but for some keys like Tab,enter.. it's not working. Below is the code what i tried.

xxx.cmp

<span onkeypress="{!c.keyCheck}" class="slds-size--11-of-12">
    <lightning:inputRichText value="{!sample}"  label="sample" labelVisible="false"/>
</span>

xxx.js

keyCheck : function(component, event, helper){
    event.preventDefault();
    event.stopPropagation();
    if (event.keyCode == 9) {
       //do something
    }
}

Answer 1

TAB can be detected on keydown event.

By using evt.preventDefault(); you can stop the default behaviour.

DETAILED EXPLANATION:

keydown: will get the code exactly the moment you begin pressing key.

keypress: Will give you Ascii code for all the characters which are printable in screen. This event is generated the moment of press (after key down). examples are all numbers, alphabets, symbols etc.

keyup: This event is the last one in key event sequence (after keypress).

IMPORTANT CONSIDERATIONS:

1. TAB can be captured only by keydown because by the time keyup event occurs, the focus would have shifted to some other element. So TAB can be captured only by keydown.

2. keypress should be used to get exact printable character. keydown and keypress will not give accurate key code. For example, if you want to know whether symbol % (percent) is entered, 1st you need press shift and then press 5. Below is the events you get:

Keydown => 16 // when shift is pressed.
Keydown => 53
// when 5 is pressed (53 code represents 5)
keypress => 37
// when 5 is pressed (37 represents %) - CORRECT
Keyup => 53 // when 5 is released
Keyup => 16 // when shift is released

As you can see above, only keypress gave accurate code.

3. Other non-printable events like control, shift, alt, esc, enter etc can be handled by either keydown or keyup only. Preferably keyup.

4. CAPS behaves similar to TAB. When CAPS is switched ON, keydown is fired and when CAPS is switched OFF, keyup is fired.

So, depending on the use case, keydown, keypress or keyup should be used.

TESTING:

<aura:attribute name="sample" type="String" default="" />

<span onkeypress="{!c.handleKeypress}" 
      onkeyup="{!c.handleKeyup}" 
      onkeydown="{!c.handleKeydown}"
      class="slds-size_11-of-12">
    <lightning:inputRichText value="{!v.sample}"  label="sample" labelVisible="false"/>
</span>

JS:

({
    handleKeypress : function(component, event, helper){
        console.log("keypress => ", event.keyCode);
    },
    handleKeyup : function(component, event, helper){
        console.log("handle Keyup => ", event.keyCode);
    },
    handleKeydown : function(component, event, helper){
        console.log("handle Keydown => ", event.keyCode);
    }
})

Answer 2

you should use onkeydown , i just tried with below example when i press tab key in 2nd input focus not moved to 3rd one.

CMP

<aura:component implements="flexipage:availableForAllPageTypes">
   <aura:attribute name="sample1" type="String" default=""/>
   <aura:attribute name="sample2" type="String" default=""/>
    <div class="slds-grid slds-wrap">
           <lightning:input aura:id="mandatoryfld" label="Sample 1" value="{!v.sample1}"  class="slds-size--1-of-4 slds-p-horizontal_x-small"></lightning:input>         


     <span onkeydown="{!c.keyCheck}" class="slds-size--11-of-12">
    <lightning:input value="{!v.sample2}"  label="sample 2" />
    </span>
     <lightning:input value="{!v.sample2}"  label="sample 2" />
   </div>
</aura:component>

Controller.js

keyCheck : function(cmp,evt,h){
    if (evt.keyCode == 9) {
        evt.preventDefault();
    }

}

Answer 3

Key Code for the tab key is 9 and for enter it is 13. I would recommend you to use the onkeydown method instead for some obviuos reasons. And use stopPropagation before preventDefault. Here is the code snippet you can try,

<span onkeydown="{!c.handleTabKey}" class="slds-size--11-of-12">
    <lightning:inputRichText value="{!sample}"  label="sample" labelVisible="false"/>
</span>

And update your Js controller method as:

handleTabKey: function (component, event, helper) {
if (event.keyCode === 9) {
    event.stopPropagation();
    event.preventDefault();
    // do the work you want
}