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);
  }
 });
});

Safari on the iPad might be parsing those as something else besides a keystroke. I'd give more info but I don't own anything starting with an i. — Austyn Mahoney, Aug 28 '10 at 01:10
What are you receiving instead of your 12 digits followed by a control character? — hotpaw2, Aug 28 '10 at 20:25
Some scanners have internal configuration systems that you can run. One of these configuration settings is whether or not they automatically send `return` after each scan. — Sebas, Feb 11 '16 at 00:29

score 5 · Answer 1 · answered Jan 26 '11 at 12:33

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.

You can wrap the web app in phonegap and use this approach: http://stackoverflow.com/a/16900931/789960 — Adan Archila, Apr 16 '14 at 19:26

score -1 · Answer 2 · answered Jan 16 '11 at 20:38

Hello try to use this that work only with the "Prototype" javascript framework. This script work only with EAN13 or EAN8, but if you want to works with 12 digit just change the "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" />

This method doesn't work at all... a form field on iOS must have focus in order for any keystrokes (keyup, keydown, keypress, etc) to be captured. It is impossible to give focus to any form element with type="hidden" or style="display:none". — James Moberg, Apr 03 '12 at 16:31

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

2 Answers2

Linked