Databases - Delphi/WebServers - Controlling the Input Focus
I have html pages that recieve data from a portable barcode reader.
For these to work, the input focus must be the barcode entry field.
In general, I hate JavaScript, but that is the only way to keep the input focus
on the barcode input field.
Barcode Entry Field
| Setting the default input field
| focus()
Barcode Entry Field
This defines the barcode entry field.
<![CDATA[
<form name="Form1" method="post" action="Pocket_PC.exe" id="Form1">
<input name="barcode" type="text" onchange="__SubmitForm"
language="javascript" id="barcode" />
]]>
Setting the default input field
This code moves the cursor to the default input field -
useful when the form's primary input is a barcode reader.
<![CDATA[
<script>
<!--
window.document.Form1.barcode.setActive();
//-->
</script>
]]>
Unfortunately, this code has a small problem.
The portable barcode
reader I am using turns off the backlight after a few seconds.
One way to turn it back on is to tap the touch sensitive screen ...
which causes the input field to loose focus.
The following code "fixes" this problem by simply moving the input
focus back to the barcode field every second.
<![CDATA[
<body onload="SetFocus()" onunload="StopTimer()">
<script>
<!--
var timerID = 0;
function SetFocus() {
window.document.Form1.barcode.setActive();
timerID = setTimeout("SetFocus()", 1000);
}
function StopTimer() {
if(timerID) {
clearTimeout(timerID);
timerID = 0;
}
}
//-->
</script>
]]>
Experimentation proves that setTimeout causes the timer
to fire only once for each time it is set.
As a result, the timer must be set each time SetFocus is called.
setInterval continues to call the target function every n milliseconds
until the program stops.
I don't think that StopTimer is nedded.
<![CDATA[
<body onload="SetFocus()">
Define the barcode field here
<script>
<!--
var timerID = 0;
function SetFocus() {
timerID = setInterval("window.document.Form1.barcode.setActive()", 1000);
}
//-->
</script>
]]>
Note that SetFocus has to be
either defined or called after
the form definition is complete.
In IE, the OnLoad body parameter is executed as soon as possible,
not after the load is complete.
(Kind of defeats the purpose.)
focus()
Originally, I implemented these functions using focus()
<![CDATA[
<script>
<!--
window.document.Form1.barcode.focus();
//-->
</script>
]]>
Initially, it worked fine ... but as testing continued
- I could not *type* in a new url because as soon as I
clicked in the address bar the input focus went back to the barcode input field.
- When testing on a laptop, when any other browser page is displayed,
the barcode entry page is automatically brought to the top.
(This is not an issue when using the barcode reader,
but it is an issue when testing on a *regular* system.)
setActive
solved both of these problems.
Author: Robert Clemenzi -
clemenzi@cpcug.org