eventi inconsistenti attivati ​​nell'area di testo in Safari su iOS

Question

Ho incontrato un bug esasperante su Safari per iPad che non riesco a risolvere.

Architettura:

• spina dorsale 0.9.9
• jQuery 1.7.2
• jQuery Mobile 1.3.1

User agent:

• iOS 5.1.1 (iPad)
• Safari 5.1 mobile
• stringa utente completa: Mozilla/5.0 (iPad; CUP OS 5_1_1 come Mac OS X) AppleWebKit/534,46 (KHTML, come Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3

Ho un 10 istanze dello stesso View, ciascuna delle quali ha una nidificato Visualizza che contiene un elemento textarea. Per qualche ragione quando tocchi la textarea, essa non si focalizza casualmente. Ho letto che Safari mobile è instabile quando si tenta di attivare eventi di attivazione che non provengono da un evento di tocco/clic, ma si tratta di un tocco diretto e non si concentra ancora in modo affidabile. Ecco il codice stripped-down per i punti di vista:

var ParentView = Backbone.View.extend({ 
    render: function() { 
     this.$el.html("<div class='textarea-container'></div>"); 
     this.textareaView = new TextareaView({ 
      el: this.$el.find('.textarea-container') 
     }); 
     this.textareaView.render(); 
    } 
}; 
var TextareaView = Backbone.View.extend({ 
    events: { 
     'tap .my-textarea': 'handleTextareaTap' 
    }, 
    render: function() { 
     this.$el.html('<textarea rows="4" cols="80" class='my-textarea'></textarea>'); 
    }, 
    handleTextareaTap: function(event) { 
     console.log('TAPPED'); 
    } 
}; 
var i = 0; 
while (i < 10) { 
    var view = new ParentView(); 
    view.render(); 
    $(body).append(view.$el); 
    i++; 
} 

Il gestore di eventi rubinetto spara il 100% del tempo. La console visualizza correttamente "TAPPED" ogni volta. Ma la maggior parte delle volte, l'interprete non riesce a focalizzarsi nella textarea. Ho aggiunto la seguente riga nel TextareaView per vedere esattamente quali eventi Safari sta sparando e in quale ordine:

var TextareaView = Backbone.View.extend({ 
    render: function() { 
     this.$el.html('<textarea rows="4" cols="80" class='my-textarea'></textarea>'); 
     this.$el.find('.my-textarea').on('blur change click contextmenu copy cut dblclick focus focusin focusout hashchange keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup mousewheel paste reset scroll select submit textinput unload wheel tap touch scrollstart scrollstop swipe swipeleft swiperight vclick vmousecancel vmousedown vmousemove vmouseout vmouseover vmouseup touchstart touchend touchmove touchcancel', function(event) { 
      console.log(event.type); 
     } 
    }, 
}; 

Ecco l'ordine evento che provo quando textarea si concentra in modo corretto: TouchStart, vmouseover, vmousedown, touchend, vmouseup , VCLIC, toccare, vmouseout, MouseMove, MouseDown, focusIn, messa a fuoco, mouseup, clic, focusOut, sfocatura

Ecco l'ordine evento che provo quando textarea non riesce a mettere a fuoco: TouchStart, vmouseover, vmousedown, touchend, vmouseup , vclick, tap, vmouseout, mousemove

Per qualche motivo gli eventi successivi a mousemove non riescono a sparare. Ho provato a scattare manualmente questi eventi come pure, ma l'elemento textarea ancora non mette a fuoco né la tastiera pop-up, ad esempio:

var TextareaView = Backbone.View.extend({ 
    handleTextareaTap: function(event) { 
     // This still doesn't work: 
     this.$el.find('.my-textarea').trigger('focus'); 
     // Neither does waiting for the synthesized WebKit events to fire: 
     var _this = this; 
     setTimeout(function(){ 
      _this.$el.find('.my-textarea').trigger('focus'); 
     }, 1000); 
    } 
}; 

ho versato sopra Apple's event handler documentation senza alcun risultato, e non posso Troviamo segnalazioni di bug relative a questo in qualsiasi repository su github. altri

due comportamenti strani che non capisco:

1. la prima istanza del textarea funziona sempre correttamente
2. textarea concentra nonostante un sfocatura caso essere chiamato

Qualsiasi l'intuizione sarebbe apprezzata.

Cheers,

Answer 1

Prova ad aggiungere questo subito dopo l'.focus()

.parent().appendTo($'form:first'); 

Quando una pagina viene resa vive nel DOM, se si modifica un elemento nel DOM può uscire del DOM dopo la modifica, quindi non si può tornare ad esso. Il codice sopra lo riporta di nuovo al DOM.

dita incrociate il testo di messa a fuoco funzionerà dopo l'elemento modded è spostato indietro nel.

un'occhiata a questo per vedere spiegato meglio.

jQuery modal form dialog postback problems

..e ..

$("#dialog").parent().appendTo($("form:first"));