Search code examples
htmlinputsamsung-smart-tvtizen-web-app

Samsung Tizen Smart TV web app Left or Right arrow keys on Keyboard UI are not working with input text


I'm developing a Samsung Tizen Smart TV App where I'm using a input tag in a HTML form. And i'm giving some input in text box and try to move cursor left and right using left and right arrow button from Samsung TV keyboard but it's not working.

<input type="text" placeholder="Enter your name" id="name">

config.xml

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" version="1.0.2" viewmodes="maximized">
    <tizen:application id="wJfsfi5g6A4.MYAPP" package="wJfsfi5g6A4" required_version="2.3"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
    <icon src="icon.png"/>
    <name>MYAPP</name>
    <tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/>
    <tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
    <tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>
    <tizen:profile name="tv-samsung"/>
    <tizen:setting screen-orientation="landscape" context-menu="enable" background-support="enable" encryption="enable" install-location="auto" hwkey-event="enable"/>
</widget>

Solution

  • To solve this problem you have to get the current position and move to current_position - 1 if pressed left or current_position + 1 if a pressed right arrow key.

    var leftmove,rightmove;
    function controlLeftArrowKeys(){
        var input = document.getElementById('name');
        if(input.value.length == 0){
            return;
        }
        var currentpos =input.selectionStart; //getting current postion of cursor 
        leftmove=currentpos-1;
        setCaretPosition(input, leftmove);
    }
    function controlrightArrowKeys(){
        var input = document.getElementById('name');
        if(input.value.length == 0){
            return;
        }
        var currentpos =input.selectionStart;  //getting current postion of cursor
        rightmove= currentpos+1;
        setCaretPosition(input, rightmove);
    }
    function setCaretPosition(ctrl, pos) {
          // Modern browsers
          if (ctrl.setSelectionRange) {
            ctrl.focus();
            ctrl.setSelectionRange(pos, pos);
    
          // IE8 and below
          } else if (ctrl.createTextRange) {
            var range = ctrl.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
          }
        }
    

    so you have to just call controlLeftArrowKeys ,controlrightArrowKeysfunctions on pressing left and right keyboard ui buttons