开篇总结：其实目前无法解决这个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. springmvc controller转发setViewName时找不到路径的问题以及转发视图时出现找不到样式的问题

    注释掉的部分是错误的写法,@RequestMapping 需要将方法放置在要转发的视图所在目录下,不然视图会找不到样式(无法正确的加载css文件), 如果将方法放在了视图所在目录下,那么 setUie ...

  2. MySQL ZIP Archive 5.7.17 安装方法

    1.下载 2.解压缩 3.创建/修改配置文件 在MySQL安装目录下,新建my.ini,内容如下参考 [mysql] # 设置mysql客户端默认字符集 default-character-set=u ...

  3. javaweb学习2——HTTP协议

    声明:本文只是自学过程中,记录自己不会的知识点的摘要,如果想详细学习JavaWeb,请到孤傲苍狼博客学习,JavaWeb学习点此跳转 本文链接:https://www.cnblogs.com/xdp- ...

  4. oracle vm virtualbox 保存虚拟系统，重装后使用

    直接将VirtualBox VMs 文件夹打包,然后在新系统中装好virtualbox 解压virtualBox VMs ,在系统文件夹中找到 .vbox结尾的文件,点击, 就可以看到熟悉的系统出现在 ...

  5. Kafka发送到分区的message是否是负载均衡的？

    首先说结论,是负载均衡的.也就是说,现在有一个producer,向一个主题下面的三个分区发送message,没有指定具体要发送给哪个partition, 这种情况,如果是负载均衡的,发送的消息应该均匀 ...

  6. 新手Python第三天(函数)

    Python 函数的创建 def func2(): print('haha') # 函数的返回值 # 函数的返回值,没有定义返回None, # 有一个返回值返回这个object(可以返回一个函数对象) ...

  7. 图-最小生成树算法之Kruskal及其Java实现

    1.Kruskal算法 Kruskal算法基于贪心,因此它追求的是近似最优解,也就是说由Kruskal得出的生成树并不一定是最优解. Kruskal算法求最小生成树的关键在于,每次选取图中权值最小(及 ...

  8. 10款常见MySQL高可用方案选型解读

    一.概述 我们在考虑MySQL数据库的高可用架构时,主要考虑如下几方面: 如果数据库发生了宕机或者意外中断等故障,能尽快恢复数据库的可用性,尽可能的减少停机时间,保证业务不会因为数据库的故障而中断. ...

  9. yarn资源memory与core计算配置

    yarn调度分配主要是针对Memory与CPU进行管理分配,并将其组合抽象成container来管理计算使用 memory配置 计算每台机子最多可以拥有多少个container:  container ...

  10. 欢迎来怼--第三十六次Scrum会议

    一.小组信息 队名:欢迎来怼 小组成员 队长:田继平 成员:李圆圆,葛美义,王伟东,姜珊,邵朔,阚博文 小组照片 二.开会信息 时间:2017/12/1 11:35~11:55,总计20min. 地点 ...