在 iOS 上的 Safari 中的 textarea 上触发的事件不一致答案

【问题标题】：inconsistent events fired on textarea in Safari on iOS在 iOS 上的 Safari 中的 textarea 上触发的事件不一致
【发布时间】：2013-07-27 04:45:48
【问题描述】：

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

架构：

骨干网 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

我有同一个视图的 10 个实例，每个实例都有一个包含 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”。但大多数时候，用户代理无法集中在文本区域中。我在 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 元素 still 没有聚焦，也没有弹出键盘，例如：

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

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

textarea 的第一个实例始终正常工作
尽管调用了 blur 事件，但文本区域仍聚焦

任何见解将不胜感激。

干杯，

【问题讨论】：

你有没有找到解决这个问题的方法？我遇到了类似的问题，很好奇你是怎么解决的。
你的渲染函数（无论如何）在类名周围使用单引号，而它应该使用双引号。这是您写问题时的拼写错误，还是您的代码是这样写的？
我从来没有找到解决方案，而且，正如经常发生的那样，项目范围发生了变化 :-) 我们不再使用这个库了。

标签： jquery ipad jquery-mobile backbone.js textarea

【解决方案1】：

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

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

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

修改后的元素移回后，手指越过文本区域焦点将起作用。

看看这个以更好地解释它。

jQuery modal form dialog postback problems

..和..

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

【讨论】：