title: Radio button and checkbox issues wtih Android webview on Android TV "Nexus Player" DPad
body: <p><strong>Nexus Player</strong> comes with <strong>DPad</strong> <em>(Bluetooth remote controller)</em>. It's <strong>directional pad</strong> acts like a standard <em>up/down/left/right</em> buttons on the keyboard. Thanks to that you can navigate the HTML-written app <em>(webview)</em> as from the standard PC/Mac. <strong>DPad</strong> has also a <strong>select button</strong> which is detected by webview as the <strong>Enter</strong> key. Pressing <strong>Enter/Select</strong> key works with standard <strong>buttons</strong> and <strong>a href</strong> links but it does not work with <strong>checkboxes</strong> and <strong>radio buttons</strong>.</p>
  
  <p><a href="http://www.google.com/design/spec-tv/system-overview/navigation.html#navigation-controllers" rel="nofollow">Dpad description</a></p>
  
  <p><strong>Radio buttons</strong> and <strong>checkboxes</strong> on the PC change the status only when <strong>Space</strong> key is pressed. Unfortunately, <strong>DPad</strong> does not have the <strong>Space</strong> key. The trick to get this working is:</p>
  
  <ol>
  <li>Detect if any key has been pressed: <code>onkeydown</code></li>
  <li>Detect if Enter/Select key has been pressed: <code>if(event.keyCode == 13){}</code></li>
  <li>Emulate the click on the checkbox/radio button: <code>this.click()</code></li>
  <li>Prevent default action which is a submit the form when the Enter/Select is pressed: <code>event.preventDefault()</code></li>
  </ol>
  
  <p>This gives us a simple "hack" written purely in <strong>JavaScript</strong> which works with <strong>AngularJS</strong>: <code>onkeydown="if (event.keyCode == 13) {this.click(); event.preventDefault()}"</code></p>
  
  <p>In my case the <strong>checkbox</strong> element looks like this:</p>
  
  <pre><code>&lt;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()}"/&gt; 
  </code></pre>
  
  <p>Note: You could also change the state of the checkbox or radio button with <code>this.checked</code> but in my case as I use <strong>AngularJS</strong> this was not working <em>(ng-change nor ng-click will not notice changes done programmatically to the checkbox/radio button)</em>.</p>
  
  <p>So, here comes my question. Is there any more "proper" way to achive this?</p>