iostextarea获取焦点_jquery – 在iOS上的Safari中针对textarea触发的不一致事件-CSDN博客

本文链接：https://blog.csdn.net/weixin_33987275/article/details/111912864

我遇到了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("

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('');

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

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

}