【移动端debug-4】iOS下setTimeout无法触发focus事件的解决方案
开篇总结：其实目前无法解决这个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事件的解决方案的更多相关文章
- ios下Safari无法触发click事件的处理
ios下的Safari真是傲娇啊,坑好多. 首先上代码 <!DOCTYPE html> <html> <head> <title>122</tit ...
- 【移动端debug-3】部分安卓机型不触发touchend事件的解决方案
最近在项目中遇到一个奇怪的问题,有一个需求是这样:页面上有一个按钮,滚动页面时让它消失,停止滚动时让它显示. 常规思路: step1.监听touchstart事件,记录Touch对象中pageY初始值 ...
- ios下点击穿透focus获取问题
在ios下的浏览器中当点击当前页的一个按钮,用window.location.href进行跳转时,如果下一个页面里这点击按钮的位置是一个textarea或者text等那么他会触发focus事件,会出现 ...
- [转]FireFox与IE 下js兼容触发click事件的代码
本文转自:http://www.jb51.net/article/16549.htm FireFox与IE 下js兼容触发click事件 ,对于需要兼容这两者的朋友,就需要参考下下面的代码了<a ...
- iOS下调用元素的focus方法，input元素不聚焦，键盘不弹起的问题
页面元素 <input type="text" ref="elInput"/> <div style="margin-top:20p ...
- 移动端 常见问题整理 iOS下的 Fixed + Input 调用键盘的时候fixed无效问题解决方案
使用iScroll时,input等不能输入内容的解决方法 <script> function allowFormsInIscroll(){ [].slice.call(document.q ...
- 移动端Web开发,ios下 input为圆角
在处理input的问题时,一般不想要input的原来的样式,一般就直接处理 border: none; outline: none; background: transparent; 这样之后,一般就 ...
- HTML5视频播放在ios下浮动元素无法点击的解决方案
最近许多人在微博上问到在iPad.iPhone.iTouch等设备上使用HTML5播放视频,在视频上方悬浮一个div元素,div内的元素无法点击的情况,而在PC浏览器上没有这个问题. 这个现象是设备特 ...
- 修改ubuntu按下关机键触发的事件
gsettings set org.gnome.settings-daemon.plugins.power button-power shutdown will change your the beh ...
随机推荐
- jenkins 多任务串行执行
摘要 今天在新创建自动化部署项目的时候遇到了一个问题:我们的项目是maven聚合的所以在构建maven项目的时候要从parent开始build,但是这样会造成一个问题,我每次添加此parent项目下的 ...
- 如何在忘记mysql的登录密码时更改mysql登录的密码(window及linux)
最近一直在边学习边开发java项目,理所当然的就少不了跟数据库打交道了,但是有时候就会脑子一短路,把mysql的登录密码给忘记了,这个时候我们又很急切的需要进到数据库中查看数据,那这个时候要怎么才能改 ...
- 使用Amplify Shader Editor优化特效Shader
ASE相对于Shader Forge生成的代码更加干净, 用于制作特效的再合适不过,以下是使用ASE优化一个SF制作特效的经过: ## 分析美术用SF制作的Shader 懒得装SF, 直接分析代码可知 ...
- Eclipse web项目更改项目名称
1. 右键工程:Refactor->Rename,更改项目名称: 2. 修改项目目录下:.project文件 <?xml version="1.0" encoding= ...
- SQL Server 各版本安装包分享
已将SQL Server 2005以上各版本的安装包分享到百度云盘,有需要的朋友可以下载进行安装,相关安装教程可以百度搜索.安装遇到难以解决的问题可以留言给我,2016版以上在选择功能的时候建议初学者 ...
- 【读书笔记】《Computer Organization and Design: The Hardware/Software Interface》(1)
笔记前言: <Computer Organization and Design: The Hardware/Software Interface>,中文译名,<计算机组成与设计:硬件 ...
- Discuz3.3精仿小米风格整站模板制作——1、新建模板方案
术语说明: 模板——模板是一堆按照规定命名方式的html文件,用于指定整个论坛不同页面的外观. 标签——标签和模板共同作用以实现论坛换肤功能,其中标签主要控制页面显示什么数据,显示多少条等. 风格—— ...
- 【python 3.6】类：访问属性及调用方法
>>> class price(): //定义1个类,用于计算价格 def __init__(self,name,danjia): //初始化方法,定义商品名称和单价 self.na ...
- Centos7.2构建Python3.6开发环境
1.安装python3.6 1.这里使用一台全新的腾讯云主机,首先获取linux系统版本信息. [root@VM_46_121_centos ~]# cat /etc/redhat-release C ...
- Notes of Daily Scrum Meeting（11.17）
Notes of Daily Scrum Meeting(11.17) 今天是第四周的周一,也就是说距离最后发布也只剩下一周的时间,但我们的工程里面还有很多的问题没有解决,我关注过 其他一两个小组,他 ...