jquery – 在iOS上的Safari中针对textarea触发的不一致事件

我遇到了Safari for iPad上的一个令人愤怒的错误,我无法修复.

建筑：

>骨干0.9.9

>jquery 1.7.2

> jquery mobile 1.3.1

用户代理：

> iOS 5.1.1(iPad)

> Safari 5.1手机

>完整的用户代理字符串：Mozilla / 5.0(iPad; CUP OS 5_1_1,如Mac OS X)AppleWebKit / 534.46(KHTML,如Gecko)版本/ 5.1 Mobile / 9B206 Safari / 7534.48.3

我有一个相同View的10个实例,每个实例都有一个包含textarea元素的嵌套视图.出于某种原因,当您点击textarea时,它会随机聚焦.我已经读过当你试图触发不是来自点击/点击事件的焦点事件时,Safari手机很不稳定,但这是一个直接点击,它仍然无法可靠地聚焦.这是视图的精简代码：

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

点击事件处理程序会在100％的时间内触发.控制台每次都正确显示“TAPPED”.但大多数情况下,用户代理无法集中在textarea中.我在TextareaView中添加了以下行,以确切了解Safari正在触发的事件以及以何种顺序：

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

这是textarea正确聚焦时获得的事件顺序：touchstart,vmouseover,vmousedown,touchend,vmouseup,vclick,tap,vmouseout,mousemove,mousedown,focusin,focus,mouseup,click,focusout,blur

这是textarea无法聚焦的事件顺序：touchstart,vmouseover,vmousedown,touchend,vmouseup,vclick,tap,vmouseout,mousemove

由于某些原因,mousemove之后的事件无法触发.我也试过手动触发这些事件,但是textarea元素仍然没有聚焦,也没有键盘弹出,例如：

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

我已经倒了 Apple’s event handler documentation 无济于事,我在github的任何一个回购中都找不到与此有关的任何错误报告.

另外两个我不理解的怪异行为：

> textarea的第一个实例始终正常工作

>尽管有一个模糊事件被调用,但textarea仍然聚焦

任何见解将不胜感激.

干杯,

尝试在.focus()之后直接添加它

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

当一个页面被渲染时它存在于DOM中,如果你修改了DOM中的一个元素,它可以在修改后移出DOM,那么你就无法回到它.

上面的代码将其转移回DOM.

在将modded元素移回后,手指越过文本区域焦点将起作用.

看看这个,看看它解释得更好.

jQuery modal form dialog postback problems

..和..

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