Question

我在Safari for iPad上遇到了一个我无法解决的令人愤怒的错误。

架构：

backbone 0.9.9
jquery 1.7.2
jquery mobile 1.3.1

用户代理：

iOS 5.1.1（iPad）
Safari 5.1 mobile
完整的用户代理字符串：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仍会聚焦
任何见解都将受到赞赏。

干杯，

Answer 1

尝试在.focus（）

之后直接添加

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

当呈现页面时，它存在于DOM中，如果修改DOM中的元素，它可以在修改后移出DOM，那么你就无法回到它。上面的代码将其转移回DOM。

手指越过你的文本区域焦点将在modded元素重新移回后工作。

看看这个，看看它解释得更好。

jQuery modal form dialog postback problems

.. ..和

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

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

1 个答案: