Can't type into html input fields on iOS after

问题:

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?

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

回答2:

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.

回答3:

jQuery Mobile 1.2.0 should be what you need

PROVE! Before ticking the box:

After ticking the box: