Question

我正在尝试创建一个屏幕键盘，它支持通过箭头键导航并使用回车键选择。

我需要将每个选择键附加到输入字段。

这是我的HTML代码。

{{1}}

提前致谢

Answer 1

试试这样的事，

$('#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());
});

Answer 2

这是一个有效的代码（注意我只是覆盖了上下键，因为这些字母是以列表的形式出现的）

        <!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>

屏幕键盘通过箭头键导航将选中的li值导入文本字段

2 个答案: