How to manage Keyboard click events ?

[Himanshu]

Hello Team BBC Tal,

I am working on onscreen keyboard, please guide me to work on kye press event and get desired pressed key value.

Please review the following code and screenshot:-
keys = ['SPACE','A','B','C','D','E','F','G','H','I','1','2','3','SPACE','DEL','J','K','L','M','N','O','P','Q','R','4','5','6','DEL',' ','S','T','U','V','W','X','Y','Z',' ','7','8','9','0'];
keyboard = new Keyboard("Keyboard", 14, 3 ,keys, true , true);
keyboard.setActiveChildKey('A');
this.appendChildWidget(keyboard);

Thank You In Advance,
Himanshu Gurung

[Tom Sadler]

Hi @Himanshu-Gurung,

The TAL keyboard sends a textchange event whenever the text changes.

However, there is no separate event for a key being pressed. If you needed this functionality, you would have to subclass the keyboard and change the _onKeyDownHandler.

Hope this answers your question, let us know if you have any follow up questions.

Tom

[Himanshu]

Hello @tsadler1988 ,

Thank you for responsing, can you please guide me with a sample code for the above.
I guess you are refering to _onKeyDown(evt) with KeyEvent http://bbc.github.io/tal/jsdoc/antie.events.KeyEvent.html.

I need to get the character entered on VK_ENTER.

Thanks In Advance,
Himanshu Gurung

[Arunprasanth]

hi Himanshu,

 keyboard.addEventListener("select", function (ev) {
                   console.log(keyboard._currentText);

                    });

This is what i have used for handling keyboard click.
You can use _onKeyDownHandler also as tom said.

[Arunprasanth]

@Himanshu-Gurung
Hi , Could you please share the css used for setting the keyboard. I couldn't find any css related to keyboard in bbctal sample app, so my keyboard looks weird.

[Himanshu]

Hello @Arunprasanth ,

Thank you so much for the reference and it worked.
Please review the css I used here :-
Page Component
#testcomponent {
display: table;
width: 100%;
height: 100%;
text-align: center;
}

Keyboard Component
#Keyboard {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}

Single Keyboard Style Changed
.keyboardButton {
display: inline-block;
}