How can i call up key event inside an input

Asked at 2016-11-24 01:38:16Z
  • 5 Subscribers
  • 114 Views
2

I have been developing a tizen web application for smart tv
There's one view where i have a lot of inputs so i need to set the navigation between them , in fact the navigation function work well for other element like divs and pictures but once i am inside an input(onfocus) i cannot move to any other element here's the event listener function

document.addEventListener('keydown',function(e) {
                switch (e.keyCode) {
                case TvKeyCode.KEY_LEFT:
                    navigation("left");
                    break;
                case TvKeyCode.KEY_UP: 
                    navigation("up");
                    break;
                case TvKeyCode.KEY_RIGHT: 
                    navigation("right");
                    break;
                case TvKeyCode.KEY_DOWN:                    
                    navigation("down");
                    break;
                case TvKeyCode.KEY_ENTER: 
                    break;
                }
});

here's the navigation function(inputindex is already initialised to zero)

function navigation(direction) {
    if (direction == "up") {
        $(".bottom-container").find("input").filter('input:eq('+inputindex+')').focus();
        inputindex--;
        }
    if (direction == "down") {
        $(".bottom-container").find("input").filter('input:eq('+inputindex+')').focus();
        inputindex++;
        }

    if (direction == "left") {
         //an other fnction
        }
    if (direction == "right") {
         //an other function
        }
}

here's the inputs

<tr>
                <td>Math:</td>
                <td><input class="inputsize" type="number" size="4" 
                    max="20" step="0" /></td>
                <td><input class="inputsize" type="number" size="4" 
                    max="20" step="0" /></td>   
            </tr>
            <tr>
                <td>Science:</td>
                <td><input class="inputsize" type="number" size="4" 
                    max="20" step="0" /></td>
                <td><input class="inputsize" type="number" size="4" 
                    max="20" step="0" /></td>   
            </tr>

Any help please


1 answers in total

0
Armaan-Ul-Islam Posted at 2016-11-24 09:40:46Z

Add the 'Input device' privilege in your config.xml file

 <tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>

You may check this Text input Guide and Key code along with the Sample code.

Answer this questsion