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

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

• javascript
• php
• jquery
• ipad
• barcode-scanner

Share Improve this question Follow edited Feb 11, 2016 at 0:28 Sebas 21.6k99 gold badges6060 silver badges109109 bronze badges asked Aug 28, 2010 at 0:21 Mark RichardsMark Richards 5111 silver badge33 bronze badges 3

• 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 Commented Aug 28, 2010 at 1:10
• What are you receiving instead of your 12 digits followed by a control character? – hotpaw2 Commented Aug 28, 2010 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 Commented Feb 11, 2016 at 0:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Safari for iOS doesn't trigger keyboard events on DOM elements that are not ponents 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.

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" />