-2

For web apps I'm using mobile devices with barcode scanners for ASP.NET web form apps. The devices only have numeric hardware keyboard. No letters. But users need to be able to additionally type three different letters "F", "Q" and "K" which I want to add as on-screen buttons. Each window of the application has multiple HTML "input" boxes.

The press of a letter "button" from the on-screen button should

  • behave exactly like a physical keyboard - add the letter at the right of the currently active HTML input, don't change focus.
  • not cause any post-backs or page reloads

I want to avoid using Javascript frameworks and I'd like to stick to standard html/css/javascript.

The question Is it possible to simulate key press events programmatically? is something different because the provided solutions will change focus.

MikeFUT
  • 7
  • 3
  • "_behave exactly like a physical keyboard - add the letter at the right of the currently active HTML input_": That's not exactly how keyboards and input events work, but it's fine as a problem constraint. In reality, it's more complicated — e.g. there is a selection (cursor position/range) and inputs insert/overwrite the selection. – jsejcksn Dec 12 '22 at 17:47
  • This seems like it might be a simple problem to solve, but in order to deliver a considerate user experience, you're going to need a lot more code than is appropriate for a question on SO. See [ask] for more info on Q/A scope. – jsejcksn Dec 12 '22 at 17:49
  • Thank you. The methods described there: https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically cause the html input to loose focus. But I need it to exactly behave like a keyboard - focus must not change while typing. – MikeFUT Dec 12 '22 at 17:50

1 Answers1

-1

With the help of https://stackoverflow.com/a/42802455/20298765 I found a workable solution that doesn't loose focus when using the on-screen keys.

<html>
    <head>
        <style>
             .btn {border-style: solid;}
        </style>
    </head>
<body>    
    <script>
        var selectedInputId;

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

    <div class="btn" onclick="javascript:{clickBtn(this)}">F</div><br/>
    <div class="btn" onclick="javascript:{clickBtn(this)}">Q</div><br/>
    <div class="btn" onclick="javascript:{clickBtn(this)}">K</div><br/>
    

    <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>
MikeFUT
  • 7
  • 3