CODEWITHSUNDEEP
javascriptjqueryhtml
semira
semira

Reputation: 341

Onscreen keyboard navigate through arrow keys get selected li value into textfield

I am trying to create a on screen keyboard which support navigation through arrow keys and select using enter key.

I need each selection key append to input field.

Here is my html code.

<div id="keyboard">
<ul id="keyboard_keys" style="width:    60%;height:300px;background:#000;margin:0     auto;position:absolute;left:0;right:0;top:50px;">
    <li id="q">q</li>
    <li id="w">w</li>
    <li id="e">e</li>
    <li id="r">r</li>
    <li id="t">t</li>
    <li id="y">y</li>
    <li id="u">u</li>
    <li id="i">i</li>
    <li id="o">o</li>
    <li id="p">p</li>
    <li id="a">a</li>
    <li id="s">s</li>
    <li id="d">d</li>
    <li id="f">f</li>
    <li id="g">g</li>
    <li id="h">h</li>
    <li id="j">j</li>
   </ul>
</div>
<form name="formuser" id="formuser">
<input type="text" id="username" name="username">
 </form>

Thanks in advance

Upvotes: 1

Views: 513

Answers (2)

Vance
Vance

Reputation: 897

Here's a working code(notice that Iv'e covered the up and down keys only since the letters are in a form of a list)

        <!DOCTYPE html>
        <html>
        <script>
        var g_currentKey=0;
        var g_currentTxtVal='';
        function selecting_key(whatKey){
        if(whatKey.keyCode==38){
            if(g_currentKey>=2){
                g_currentKey-=2;
            }
            else{
                g_currentKey=0;
            }
            document.getElementById('currentkey').innerHTML=document.getElementById('keyboard_keys').childNodes[g_currentKey].innerHTML;
        }
        if(whatKey.keyCode==40){
            if( g_currentKey==0){
                g_currentKey+=1;
            }
            else{
                g_currentKey+=2;
            }
            document.getElementById('currentkey').innerHTML=document.getElementById('keyboard_keys').childNodes[g_currentKey].innerHTML;
        }
        if(whatKey.keyCode==13){
            whatKey.preventDefault();
        if(document.getElementById('currentkey').innerHTML!='undefined'){
            document.getElementById('username').value=document.getElementById('username').value + document.getElementById('currentkey').innerHTML;
        }
        }
    }
        </script>
        <body>

        <div id="keyboard">
        <ul id="keyboard_keys" style="width:    60%;height:300px;margin:0     auto;position:absolute;left:0;right:0;top:50px;">
            <li id="q">q</li>
            <li id="w">w</li>
            <li id="e">e</li>
            <li id="r">r</li>
            <li id="t">t</li>
            <li id="y">y</li>
            <li id="u">u</li>
            <li id="i">i</li>
            <li id="o">o</li>
            <li id="p">p</li>
            <li id="a">a</li>
            <li id="s">s</li>
            <li id="d">d</li>
            <li id="f">f</li>
            <li id="g">g</li>
            <li id="h">h</li>
            <li id="j">j</li>
           </ul>
        </div>
        <input type="text" id="username" name="username" onkeyup='selecting_key(event);' autocomplete='off'>
        <span id='currentkey'></span>
        </body>
        </html>

Upvotes: 1

Gagan
Gagan

Reputation: 130

Try someting like this,

$('#keyboard_keys li').unbind('click').bind('click', function() {
    //#inputTag as any inpput tag you want the value to be appended
	$('#inputTag').val($('#inputTag').val() + $(this).text());
});

Upvotes: 1

Related Questions