开篇总结:其实目前无法解决这个bug。

这两天做项目遇到了这个case,项目需求是打开页面的时候,input元素自动弹起键盘。由于各种方面的考虑,我们希望通过setTimeout延时200毫秒让input元素focus,demo代码如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IOS下setTimeout无法触发focus事件的解决方案</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
</head>
<body>
<div id="container">
<input id="input-box" type="text" placeholder="click here to focus.">
</div>
<script>
var container = document.getElementById("container");
var input = document.getElementById("input-box");
setTimeout(function () {
input.focus();
},200);
</script>
</body>
</html>
  • 问题出在哪?

上面的代码在pc上显示没有问题,但是在安卓上也ok,但是在ios上出了问题,input没有获得焦点,问题出在哪了?

我通过debug发现,代码能执行到setTimeout里面,并且input元素也没有选择失败,那我们判断是input.focus()这句失效了。

  • 前人指路

然后我们在stackoverflow上搜到了相关的case:Mobile Safari Autofocus text field

在最高票答案中,来自FastClick团队的大牛指出了IOS下input的获取焦点存在这样的问题:

my colleagues and I found that iOS will only allow focus to be triggered on other elements, from within a function, if the first function in the call stack was triggered by a non-programmatic event. In your case, the call to setTimeout starts a new call stack, and the security mechanism kicks in to prevent you from setting focus on the input.

翻译:我和我的同事发现,iOS将只允许在其他元素上绑定函数来触发focus事件,如果第一个函数调用栈是由非编程触发的事件(这句不知道怎么翻译)。在你的案例中,调用setTimeout开始一个新的调用堆栈,IOS的安全机制开始阻止你触发input元素的focus事件。

github上也有相关的issue:iOS does not show keyboard on .focus()

里面也有人指出:

iOS won't, as far as I can tell from testing, show the keyboard without some kind of user interaction.Trying a setTimeout to load it doesnt work. But setting the focus on another element's onClick event brings it up.

翻译:据我目前测试所知,如果没有通过某种用户交互,iOS不会(触发focus事件)。用setTimeout试图触发focus不工作(setTimeout是延时触发,非用户交互的当下触发focus),但设置另一个元素的onClick事件,就能把focus事件带起来。

    //通过在input以外的其他元素绑定事件可以触发input元素的focus事件
container.addEventListener("click",function(e){
input.focus();
});
  • 解决方案?

目前看来没有更好的办法能在iOS下,通过setTimeout调起focus事件,所以只能把setTimeout去掉,从产品设计上避免。

如果你有什么好的解决方案,欢迎留言哦!

【移动端debug-4】iOS下setTimeout无法触发focus事件的解决方案的更多相关文章

  1. ios下Safari无法触发click事件的处理

    ios下的Safari真是傲娇啊,坑好多. 首先上代码 <!DOCTYPE html> <html> <head> <title>122</tit ...

  2. 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案

    最近在项目中遇到一个奇怪的问题,有一个需求是这样:页面上有一个按钮,滚动页面时让它消失,停止滚动时让它显示. 常规思路: step1.监听touchstart事件,记录Touch对象中pageY初始值 ...

  3. ios下点击穿透focus获取问题

    在ios下的浏览器中当点击当前页的一个按钮,用window.location.href进行跳转时,如果下一个页面里这点击按钮的位置是一个textarea或者text等那么他会触发focus事件,会出现 ...

  4. [转]FireFox与IE 下js兼容触发click事件的代码

    本文转自:http://www.jb51.net/article/16549.htm FireFox与IE 下js兼容触发click事件 ,对于需要兼容这两者的朋友,就需要参考下下面的代码了<a ...

  5. iOS下调用元素的focus方法,input元素不聚焦,键盘不弹起的问题

    页面元素 <input type="text" ref="elInput"/> <div style="margin-top:20p ...

  6. 移动端 常见问题整理 iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案

    使用iScroll时,input等不能输入内容的解决方法 <script> function allowFormsInIscroll(){ [].slice.call(document.q ...

  7. 移动端Web开发,ios下 input为圆角

    在处理input的问题时,一般不想要input的原来的样式,一般就直接处理 border: none; outline: none; background: transparent; 这样之后,一般就 ...

  8. HTML5视频播放在ios下浮动元素无法点击的解决方案

    最近许多人在微博上问到在iPad.iPhone.iTouch等设备上使用HTML5播放视频,在视频上方悬浮一个div元素,div内的元素无法点击的情况,而在PC浏览器上没有这个问题. 这个现象是设备特 ...

  9. 修改ubuntu按下关机键触发的事件

    gsettings set org.gnome.settings-daemon.plugins.power button-power shutdown will change your the beh ...

随机推荐

  1. Spring boot jpa @Column命名大小写问题

    一.问题 驼峰命名会被自动转成数据库下划线命名,指定@Column的name也不起作用 举例: @Column(nullable = false,name = "resolvedDate&q ...

  2. 设计模式:代理模式 vs 装饰模式

    参考文章:https://www.cnblogs.com/luoxn28/p/5535877.html 代理模式和装饰模式非常类似,甚至代码都类似. 二者最主要的区别是: 代理模式中,代理类对被代理的 ...

  3. avascript小技巧

    avascript小技巧 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture() ...

  4. requestAnimationFrame优势何在?

    大概半年前,无意中在网上看到一个新的js函数requestAnimationFrame,据说,此函数可以优化传统的js动画效果,似乎是未来js动画的新方向. 当时我所在的项目正好用到了和js动画有关的 ...

  5. JDBC多表操作

    一.一对多关系:部门管理系统 1.数据库 create table department ( id ) primary key, name ) ); create table employee ( i ...

  6. SSH结合EasyUI系统(一)———简单介绍

    鉴于前文<不仅仅是吐槽>,决定将自己学过的和在学的东西整理一下放进园子:做一个好园友! 接下来将会持续更新的是近一段时间在学的java web中比较流行的框架SSH(Struts+Spri ...

  7. 【Ansible】ansible循环

    Ansible 循环 一.简单介绍 在ansible2.5之前,大多数人使”with_XXX”类型的关键字来操作循环,但是从2.6版本开始,官方推荐是”loop”关键字代替” with_XXX”. 1 ...

  8. NodeJS http模块

    Node.js提供了http模块,用于搭建HTTP服务端和客户端. 创建Web服务器 /** * node-http 服务端 */ let http = require('http'); let ur ...

  9. Nginx中server_name 参数详解

    Nginx中的server_name指令主要用于配置基于名称的虚拟主机,server_name指令在接到请求后的匹配顺序分别为: 1.准确的server_name匹配,例如: server { lis ...

  10. 苏宁笔试:UML类图中的关系

    1. 依赖 2. 关联 3. 聚合 4. 组合 5. 泛化 6. 实现