How can I add a Javascript listener to capture input using a Bluetooth barcode scanner on an iPad?

Question

I am having problems registering keystrokes in javascript on iPad. The following script works with Chrome and Safari, but not with iPad Safari. The bluetooth barcode scanner sends 12 digits in the form of keystrokes, and then sends a return character. Does anyone have any idea?

I think you need an iPad to try this :)

Thanks Mark

$(document).ready(function(){ $(document).keypress(function(e){ if( e.keyCode == 13){ alert($('#barcode').attr('value')); $('#barcode').attr('value',''); } else{ var key = String.fromCharCode(e.which); var new_val = $('#barcode').attr('value') + key; $('#barcode').attr('value',new_val); } }); }); 

Answer 1

Safari for iOS does not trigger keyboard events on DOM elements that are not form components. This includes the document and body, which are commonly used to capture keystrokes on any page.

The only way to trigger a keypress event on a document or page body is to call it in an input or text field. In this case, the event will correctly “bubble” with the body and the document.

However, this can be a problem because Safari for iOS does not allow us to select an element from javascript.

We are currently using a solution in which the user needs to click on the input field before starting the first scan, and then the input field will be moved off the screen, but focus will remain.

If anyone has a better solution, share it.

Answer 2

Hello, try using this, which only works with the javascript "Prototype" framework. This script only works with EAN13 or EAN8, but if you want to work with 12 digits just change "if (result.lenght == 13)".

 <script language="javascript" type="text/javascript"> Event.observe(window, 'load', function(){ Event.observe(document, 'keyup', myEventHandler); }); var timeout = 0; function myEventHandler(e) { if(e.keyCode == 13) { var result = $('test').value; $('test').value = ''; if(result.length == 13 || result.length == 8) { var d = new Date(); var interval = d.getTime() - timeout; timeout = 0; if(interval <= 1000) { alert(result); } } } else if(e.keyCode >= 48 && e.keyCode <= 57) { if(timeout == 0) { var d = new Date(); timeout = d.getTime(); } var key = String.fromCharCode(e.which); var new_val = $('test').value + key; $('test').value = new_val; } } </script> <input type="hidden" id="test" />