Thursday, October 1, 2015

Setting Focus for Barcode Scan Input

 

Barcode scanners read barcode data and "write" the data into an area waiting to receive the data.  You could open Notepad and scan a barcode right into notepad.    On a web site, we need a textbox or other input control to receive the scanned data.

We could force our users to physically click a text box before scanning but it is normally better to have the input control selected by the software  so the user can scan without repeatedly clicking an input control.

The Solution Seems Obvious Unless Your Using IE9

A couple of solutions seem to be obvious choices.   
  1. Call the Focus() function on the input control in the OnPreRender event handle. 
  2. Call the Focus() function on the input control using JavaScript in the window onload() event.

Neither one of these solutions work on the page_load() when the input control is AJAX enabled. The window onload() event is raised before AJAX enabled controls are intialized. 

And the Answer Is ...Sys.Application.add_load()

We need to find a place to set the focus after ALL controls have been created and initialized.   We need this event to be raised after every AJAX call as well.   Add this code in a <script></script> section in your .ASPX page 

Sys.Application.add_load(applicationLoadHandler);

function  applicationLoadHandler() {
           // Call function to set focus on the scanning input control.             
           SetFocusForScan();

}


Visit www.BlueCanyonSoftware.com if you need custom software for your business.