Nexus Player comes with DPad (Bluetooth remote controller). It's directional pad acts like a standard up/down/left/right buttons on the keyboard. Thanks to that you can navigate the HTML-written app (webview) as from the standard PC/Mac. DPad has also a select button which is detected by webview as the Enter key. Pressing Enter/Select key works with standard buttons and a href links but it does not work with checkboxes and radio buttons.
Radio buttons and checkboxes on the PC change the status only when Space key is pressed. Unfortunately, DPad does not have the Space key. The trick to get this working is:
- Detect if any key has been pressed:
onkeydown - Detect if Enter/Select key has been pressed:
if(event.keyCode == 13){} - Emulate the click on the checkbox/radio button:
this.click() - Prevent default action which is a submit the form when the Enter/Select is pressed:
event.preventDefault()
This gives us a simple "hack" written purely in JavaScript which works with AngularJS: onkeydown="if (event.keyCode == 13) {this.click(); event.preventDefault()}"
In my case the checkbox element looks like this:
<input ng-change="MyFunction()"
ng-model="MyVariables"
ng-required="!MyVariables"
name="MyRadioButton"
id="MyRadioButton"
value="MyValue"
type="radio"
onkeydown="if (event.keyCode == 13) {this.click(); event.preventDefault()}"/>
Note: You could also change the state of the checkbox or radio button with this.checked but in my case as I use AngularJS this was not working (ng-change nor ng-click will not notice changes done programmatically to the checkbox/radio button).
So, here comes my question. Is there any more "proper" way to achive this?
