0

I have created an on-screen keyboard in HTML using <div> and <a> tags. On the page there are six text inputs (firstName, nickname, lastName, notes, allergies, 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. 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:

<a href="#" class="btn btn-default btn-lg digit">q</a>
BGamache
  • 3
  • 1

1 Answers1

0

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>
Jury Golubev
  • 334
  • 2
  • 5
  • This got me what I needed it to do. Thank you. Also, `selectedInputId.value = selectedInputId.value + key.innerHTML` will need a semi-colon on the end. – BGamache Mar 16 '17 at 00:22
  • Sure, it will (even though it will work without it :) ), thanks. Corrected. – Jury Golubev Mar 16 '17 at 10:25