php - How can I add a Javascript listener to capture input from bluetooth barcode scanner to iPad?

Question

I'm having trouble logging keystrokes in javascript on the iPad. The following script works on Chrome and Safari, but not iPad Safari. The bluetooth barcode scanner sends 12 digits as keystrokes, then sends a return character. Does anyone have any ideas?

I think you will need an iPad to try this out :)

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 doesn't trigger keyboard events on DOM elements that are not components of a form. This includes the document and body which are usually used to capture keystrokes anywhere on the page.

The only way to trigger a keystroke event on document or body of a page is to trigger it in an input or textarea. In that case, the event will correctly 'bubble' to the body and document.

However, this might be a problem because Safari for iOS doesn't allow us to give an element focus from javascript.

At the moment, we are using a solution where user has to click on an input field before starting the first scan, and the input field is then moved off-screen but retains focus.

If someone has a better solution, please share.