jquery - iOS 上 Safari 中文本区域触发的事件不一致

Question

我在 iPad 版 Safari 上遇到了一个令人恼火的错误，但无法修复。

架构:

• 主干0.9.9
• jquery 1.7.2
• jquery 移动版 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 元素的嵌套 View 。由于某种原因，当您点击文本区域时，它会随机不聚焦。我读过，当您尝试触发并非来自点击/单击事件的焦点事件时，Safari 移动版会出现不稳定的情况，但这是直接点击，它仍然无法可靠地聚焦。这是 View 的精简代码:

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”。但大多数时候，用户代理无法将焦点集中在文本区域。我将以下行添加到 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);
        }
    },
};

这是文本区域正确聚焦时得到的事件顺序:touchstart、vmouseover、vmousedown、touchend、vmouseup、vclick、tap、vmouseout、mousemove、mousedown、focusin、focus、mouseup、click、focusout、blur

这是我在文本区域无法聚焦时得到的事件顺序:touchstart、vmouseover、vmousedown、touchend、vmouseup、vclick、tap、vmouseout、mousemove

由于某种原因，mousemove 之后的事件无法触发。我也尝试过手动触发这些事件，但是文本区域元素仍然没有聚焦，也没有弹出键盘，例如:

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 上的任何存储库中都找不到与此相关的任何错误报告。

另外两个我不明白的奇怪行为:

1. 文本区域的第一个实例始终正常工作
2. 尽管调用了模糊事件，但文本区域仍然聚焦

如有任何见解，我们将不胜感激。

干杯，

Answer 1

尝试将其直接添加到 .focus() 之后

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

当一个页面被渲染时，它存在于 DOM 中，如果你修改 DOM 中的一个元素，它可以在修改后移出 DOM，然后你就无法返回它。 上面的代码将其移回 DOM。

手指交叉文本区域焦点将在修改后的元素移回后起作用。

看看这个，看看它的解释是否更好。

jQuery modal form dialog postback problems

..和..

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