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

Question

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

http://jsfiddle.net/Hk56Q/

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?

Answer 1

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