các sự kiện không nhất quán được kích hoạt trên vùng văn bản trong Safari trên iOS

Question

Tôi đã gặp phải lỗi gây phiền toái trên Safari dành cho iPad mà tôi không thể khắc phục.

Kiến trúc:

• xương sống 0.9.9
• jquery 1.7.2
• jquery di động 1.3.1

đại diện người dùng:

• iOS 5.1.1 (iPad)
• Safari 5.1 mobile
• chuỗi tác nhân người dùng đầy đủ: Mozilla/5.0 (iPad; CUP OS 5_1_1 như Mac OS X) AppleWebKit/534,46 (KHTML, như Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3

Tôi có 10 trường hợp so với cùng View, mỗi trong số đó có một lồng nhau Chế độ xem có chứa phần tử văn bản. Đối với một số lý do khi bạn chạm vào vùng văn bản, nó ngẫu nhiên không tập trung. Tôi đã đọc rằng điện thoại di động Safari là chiến thắng khi bạn cố gắng kích hoạt các sự kiện tiêu điểm không đến từ một sự kiện nhấn/bấm, nhưng đây là một vòi nước trực tiếp và nó vẫn không tập trung đáng tin cậy. Dưới đây là mã được gỡ xuống cho các chế độ xem:

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

Trình xử lý sự kiện nhấn sẽ kích hoạt 100% thời gian. Bảng điều khiển hiển thị chính xác "TAPPED" mỗi lần. Nhưng hầu hết thời gian, tác nhân người dùng không tập trung vào vùng văn bản. Tôi đã thêm dòng sau vào TextareaView để xem chính xác các sự kiện Safari được bắn và theo thứ tự:

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

Đây là sự kiện đặt hàng tôi nhận được khi textarea tập trung một cách chính xác: touchstart, vmouseover, vmousedown, touchend, vmouseup , vclick, vòi, vmouseout, MouseMove, mousedown, focusin, tập trung, mouseup, nhấp chuột, focusout, mờ

đây là sự kiện đặt hàng tôi nhận được khi textarea thất bại đáng chú ý: touchstart, vmouseover, vmousedown, touchend, vmouseup , vclick, tap, vmouseout, mousemove

Vì một số lý do, các sự kiện sau khi di chuột không thể kích hoạt. Tôi đã thử bằng tay gây ra những sự kiện này là tốt, nhưng các yếu tố textarea vẫn không tập trung cũng không bàn phím bật lên, ví dụ:

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

Tôi đã đổ lên Apple's event handler documentation vô ích, và tôi có thể 't tìm thấy bất kỳ báo cáo lỗi liên quan đến điều này trong bất kỳ repos trên github.

Hai hành vi kỳ lạ khác mà tôi không hiểu:

1. trường hợp đầu tiên của textarea luôn luôn làm việc một cách chính xác
2. các textarea tập trung mặc dù kiện mờ được gọi

Bất kỳ cái nhìn sâu sắc sẽ được đánh giá cao.

Chúc mừng,

Answer 1

Hãy thử thêm này trực tiếp sau khi .focus()

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

Khi một trang được trả lại nó sống trong DOM, nếu bạn sửa đổi một yếu tố trong DOM nó có thể di chuyển ra khỏi của DOM sau khi sửa đổi, sau đó bạn không thể quay lại với nó. Đoạn mã trên chuyển nó trở lại DOM.

Ngón tay vượt qua khu vực tập trung văn bản của bạn sẽ làm việc sau khi các yếu tố modded được chuyển trở lại trong.

có một cái nhìn tại này để xem nó giải thích tốt hơn.

jQuery modal form dialog postback problems

..và ..

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