Can't type into html input fields on iOS after clicking twice

I’m experiencing an issue on iOS and I’ve put up a fiddle for it:

http://jsfiddle.net/Hk56Q/

  • GSSendEvent - Inject Touch Event iOS
  • swift: how to get the indexpath.row when a button in a cell is tapped?
  • Handle Touch in UiCollectionView?
  • Xcode: How to change Image on Touching at an Image (same Position)?
  • How to get touch size in iOS?
  • How can I use Core Graphics to draw a circle at my touch location?
  • If an event listener is added to the document for any touch event (touchstart/touchmove/touchend), like so:

    function onTouch( e ){};
    document.addEventListener( 'touchstart', onTouch, false );
    

    that results in the input fields having the following behaviour on iOS:

    • First touch: the input gets focus and the user can type correctly into it
    • Subsequent touches (with focus on the field already in place): typing doesn’t work anymore

    I’m experiencing and testing this issue on iOS 5, 5.1 and 6, on both iPad and iPhone (simulators and actual devices).

    The only fix seems to be removing the event listener to restore the correct behaviour of the input fields (or to actually never add the listener at all):

    document.removeEventListener( 'touchstart', onTouch);
    

    I also noticed that if there are multiple iframes on the page, and one of them adds the listener to its document, it breaks the other iframe’s input fields too.

    The fiddle behaves correctly on my Android phone.

    Any ideas why is this happening? Or how to have global custom event handlers for touch events in place that don’t break the inputs on iOS?

    3 Solutions Collect From Internet About “Can't type into html input fields on iOS after clicking twice”

    Here’s a workaround. Set the focus to the window and then back to the node, in a timeout:

    function fixIpadTouch(node){
        node.ontouchend=function(e){
            if(document.activeElement===node){
                window.focus();
                setTimeout(function(){
                    node.focus();
                },0);
            }
        }
    }
    

    A variation of Terry’s answer worked around this Mobile Safari bug (!!!) in my case. Here, ‘#input’ and this code is on the iframe page:

    var el = $('#input');
    el.on('keydown', function() {
      window.focus()
      el.focus()
    });
    

    The bug triggers in multiple ways but ‘keydown’ comes through reliably. This makes the next ‘keypress’ arrive as well.

    jQuery Mobile 1.2.0 should be what you need

    PROVE! Before ticking the box:

    PROVE(before)

    After ticking the box:

    After ticking