开篇总结：其实目前无法解决这个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 使用jq传递json数据时出现415错误

    出现415错误是因为解析json时出现了错误,通过排查几点就能解决. 样例: <script> function requestByJson() { var datatest = {&qu ...

  2. XAF-由于try catch导致的性能问题一例

    前几天在制作PMMS系统时,有天突然发现性能问题下降严重,发布到客户机后,每点击一个按钮要花5-10秒的时间,与本机的200-600毫秒差距很大. 经过多处优化后没有效果. 后来想起,最近增加的功能是 ...

  3. 【轮子狂魔】抛弃IIS，打造个性的Web Server - WebAPI/Lua/MVC（附带源码）

    引言 此篇是<[轮子狂魔]抛弃IIS,向天借个HttpListener - 基础篇(附带源码)>的续篇,也可以说是提高篇,如果你对HttpListener不甚了解的话,建议先看下基础篇. ...

  4. Python科学计算库-Numpy

    NumPy 是 Python 语言的一个扩充程序库.支持高级大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库,也是学习 python 必学的一个库. 1. 读取文件 numpy.gen ...

  5. Jenkins安全

    Jenkins安全 在Jenkins中,可在 Jenkins 实例建立用户和他们的相关权限.默认情况下,不希望每个人都能够在 Jenkins 中定义工作或其他管理任务.因此,Jenkins 必须有一个 ...

  6. NO--13微信小程序，左右联动

    写在前面: 从2016年张小龙发布微信小程序这种新的形态,到2017年小程序的不温不火,再到今年小程序的大爆发,从一度刷爆朋友圈的‘头脑王者’,再到春节聚会坐在一起的火爆小游戏“跳一跳",都 ...

  7. Spring Boot 学习目录

    之前一直做.net 的开发,后来发现C# 在生态方面和Java还是差了好多,而且目前有很多.net 方面的技术也是借鉴了Java相关的开发,所以最近准备学习了解一下java 相关的web开发,从中学习 ...

  8. 面向 Web 开发者的 Sublime Text 插件

    Package Control 在 Sublime Text 上大家都用 Package Control 来管理安装插件,所以它是我们要安装的第一个插件,安装方法见这里.关于 Package Cont ...

  9. pytorch 如何使用tensorboard实时查看曲线---- tensorboardX简介

    用惯了tensorflow的小伙伴肯定都用过tensorboard工具吧.虽然Facebook也推出了visdom,但是在一次不小心误触clear之后,我放弃了这个工具(页面的一个clear按钮我本来 ...

  10. jenkins设置定时任务

    每次都手动的构建项目显然不够方便,有时候需要定时地执行自动化测试脚本.例如,每天晚上定时执行 pjenkins.py 文件来运行自动化测试项目. 设置定时任务 前面已经创建的 “python test ...