how does the ipad handle keystroke events at the document level

lewis.ayers · Jun 10, 2010

I am working on a web application for my company that uses an iPad and a bluetooth barcode scanner as portable input devices. At first, I used an input field to capture the scanners output and submit the form. The problem is, once the screen reloads, there is no way to get the input field to get focus. This results in the user having to tap the field before each scan or the input is ignored. I have tried several methods of focusing on the field when the page loads, but it seems that the javascript 'focus()' method simply will not work without user input such as tapping a button.

So that was a dead end...then I tried to tie an event listener to the document object with document.addEventListener('keydown', doit, false) (which works just fine on the full version of safari). Again, the ipad ignores the input until I tap on a form field. Any Ideas?

mrgad · Jul 2, 2010

I am having the exact same issue, and I was just about to begin playing with code to fix it.

Which methods did you try without any luck?

I was planning on a very simple:

<body onload="document.formName.elements[X].focus();">

(where X is the field # I want to begin with)

Did you try something along these lines and it failed to work? I would have though this would be just fine.

Alling · Jul 3, 2010

Could something like this work?

HTML:

Code:

<body onload="tigerFunc()">

...

<input type="text" id="monkeyForm" />

JavaScript (external file):

Code:

function tigerFunc()
{
document.getElementById('monkeyForm').focus();
}

Or have you already tried that?

lewis.ayers · Jul 6, 2010

Yes, I have tried that as well. It seems that triggering a focus event on a form field with page load by direct means or by execution of a function does not work. However, if you tie the same function to a touch event or button press, focus works. I have a gut feeling that apple has deliberately done this to prevent the keyboard from appearing on page load.
I have even gone as far as trying to capture keystrokes instead of using a text field. These methods will not work until you press something on the screen to give some element focus. I tried tying event listeners to the document and window objects, alas, no luck.

I have tested all of these methods in safari on my Mac Mini and all have worked until i load the same page on the iPad.

As I type this, I have another idea to try. The problem, in its simplest form, is the fact that no object has focus on page load. What if we don't submit the data with a traditional form submit? It might be possible to intercept the carrage return at the end of the string and use an AJAX call send the data and supply a callback function that inserts the return data into a div. This I have done before, but the trick here is clearing the content of the text field and maintain focus for the next scan. I will give it a shot an post my results back.

mrgad said:
I am having the exact same issue, and I was just about to begin playing with code to fix it.

Which methods did you try without any luck?

I was planning on a very simple:

<body onload="document.formName.elements[X].focus();">

(where X is the field # I want to begin with)

Did you try something along these lines and it failed to work? I would have though this would be just fine.

lewis.ayers · Jul 6, 2010

got it

here is the solution I came up with....

Code:

<?php
if(isset($_REQUEST['data']))
{
    $output=$_REQUEST['data'];
}

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../includes/js/jquery-1.4.2.min"></script>
    <script type="text/javascript">
        function testit(e)
        {
            var fdata=document.getElementById('data').value;
            $.post("ipadtest.php", $("#testform").serialize(), function(data){
                $('#output').load("ipadtest.php?data="+fdata+" #output");
            });
            document.getElementById('data').value='';
            return false;

        }
    </script>
  </head>
  <body>
      <form name="testform" id="testform" onsubmit="return testit();">
        <input type="text" id="data" name="data" />
    </form>
      <div id="output"><?echo $output;?></div>
  </body>
</html>

This is a simple test using jquery libraries to accomplish a ajax request. because the text field never looses focus, you can scan several times without having to touch the screen. It just requires that you touch the text field when you are ready to begin scanning.
:ipad-keyboard:

Google search

Google search

Google search

how does the ipad handle keystroke events at the document level

lewis.ayers

iPF Noob

mrgad

iPF Noob

Alling

iPF Noob

lewis.ayers

iPF Noob

lewis.ayers

iPF Noob

Most reactions

Similar threads

Latest posts