Issue
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.
While there are similar questions there is a substantial difference - they don't care about input focus.
Solution
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>
Answered By - MikeFUT
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.