Non è possibile digitare nei campi di input html su iOS dopo aver cliccato due volte

Question

che sto vivendo un problema su iOS e ho messo su un violino per esso:

http://jsfiddle.net/Hk56Q/

Se viene aggiunto un listener di eventi al documento per qualsiasi evento di tocco (TouchStart/touchmove/touchend), in questo modo:

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

che si traduce nei campi di immissione con il seguente comportamento su iOS:

• primo tocco: l'ingresso viene messa a fuoco e l'utente può digitare correttamente in esso
• tocchi successivi (con focus sul campo già in atto): la tipizzazione non funziona più

sto sperimentando e testare questo problema su iOS 5, 5.1 e 6, sia su iPad che su iPhone (simulatori e dispositivi reali).

L'unica soluzione sembra essere la rimozione del listener di eventi per ripristinare il corretto comportamento dei campi di input (o in realtà non aggiungere mai l'ascoltatore a tutti):

document.removeEventListener('touchstart', onTouch); 

Ho anche notato che se ci sono più iframe nella pagina, e uno di essi aggiunge l'ascoltatore al suo documento, interrompe anche i campi di input degli altri iframe.

Il violino si comporta correttamente sul mio telefono Android.

Qualche idea perché sta succedendo? O come disporre di gestori di eventi personalizzati globali per eventi touch che non interrompano gli input su iOS?

Answer 1

jQuery Mobile 1.2.0 dovrebbe essere quello che ti serve

PROVARE! Prima spuntando la casella:

Dopo spuntando la casella:

Answer 2

Ecco una soluzione. Impostare l'attivo alla finestra e poi di nuovo al nodo, in un timeout:

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

Answer 3

Una variazione della risposta di Terry lavorato a questo problema Safari Mobile (!!!) nel mio caso. Qui, '#INPUT' e questo codice è nella pagina iframe:

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

Il bug fa scattare in diversi modi, ma 'keydown' passa attraverso affidabile. Questo fa sì che arrivi anche il prossimo "keypress".