当按下html键盘按钮时，将文本添加到输入字段（具有焦点的字段）中

Question

I have created an on-screen keyboard in HTML using <div> and <a> tags. 我已经使用<div>和<a>标签在HTML中创建了一个屏幕键盘。 On the page there are six text inputs (firstName, nickname, lastName, notes, allergies, mobileNumber). 在页面上有六个文本输入（名字，昵称，姓氏，便笺，过敏，mobileNumber）。 I'm not that great at JS but I do know how to do it if there is just one input on the page but I'm not sure how to do it when there are multiple. 我对JS的了解不是很好，但是如果页面上只有一个输入，我确实知道该怎么做，但是当有多个输入时，我不确定该怎么做。 Part of what I'm struggling with is the input box loses focus as soon as I click on a letter. 我苦苦挣扎的部分原因是，当我单击字母时，输入框会失去焦点。

How do I append the letter to the selected input and not lose focus on that input? 如何将字母附加到选定的输入上，而又不将注意力集中在该输入上？ This is what I use to append a letter to one input when it is the only input on the page: 这是我在页面上的唯一输入时将字母附加到一个输入的方法：

var setClickEvents = function () {            
    $('.keyboard a.digit').unbind('click').click(function () {
        $name = $("input[id$='tbSearchBox']");
        $name.val($name.val() + $(this).html());
    });
}

HTML keyboard button--just one letter but it is the same style/setup for all letters and numbers: HTML键盘按钮-仅一个字母，但所有字母和数字的样式/设置都相同：

<a href="#" class="btn btn-default btn-lg digit">q</a>

Answer 1

You can save the reference to the focused input in some global variable. 您可以将对焦点输入的引用保存在某些全局变量中。
And use it to set the focus back in text-appending function 并使用它将焦点设置回附加文本的功能中

<html>
    <body>    
        <script>
            var selectedInputId;

            function clickBtn(key) {
                if (selectedInputId != null) {
                    selectedInputId.value = selectedInputId.value + key.innerHTML;
                    selectedInputId.focus();
                }
            }
        </script>

        <a href="#" class="btn btn-default btn-lg digit" onclick="javascript:{clickBtn(this)}">q</a>

        <input type="text" id="id1" onfocus="javascript:{selectedInputId=this;}" />
        <input type="text" id="id2" onfocus="javascript:{selectedInputId=this;}" />
        <input type="text" id="id3" onfocus="javascript:{selectedInputId=this;}" />
        <input type="text" id="id4" onfocus="javascript:{selectedInputId=this;}" />
    </body>
</html>

当按下html键盘按钮时，将文本添加到输入字段（具有焦点的字段）中

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-03-15 06:23:53

当按下html键盘按钮时，将文本添加到输入字段（具有焦点的字段）中

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-03-15 06:23:53

解决方案1
0 已采纳 2017-03-15 06:23:53