input获取焦点问题

摘要

有些时候,对于前端开发人员来说,苹果机真是一个让人又爱又恨的“家伙”。

对于元素获取焦点这个问题,相信很多人都不陌生,因为很多情况下我们需要处理这个问题。

在JS中有一个事件——focus事件,用来为元素获取焦点。当然了,虽然是一个标准事件,但也不是所有的元素都可以使用的。仅供那些可以获得焦点的元素可用,如表单元素等。

有些时候,对于前端开发人员来说,苹果机真是一个让人又爱又恨的“家伙”。

对于元素获取焦点这个问题,相信很多人都不陌生,因为很多情况下我们需要处理这个问题。

在JS中有一个事件——focus事件,用来为元素获取焦点。当然了,虽然是一个标准事件,但也不是所有的元素都可以使用的。仅供那些可以获得焦点的元素可用,如表单元素等。

前段时间,笔者在做一个移动端活动页面时,发现了一个相当有趣的事——input无法获取焦点。

问题产生的条件是这样的,活动面的一个元素在点击之后会有一个动画,这个动画执行完成后页面的搜索框要获取焦点来让软键盘弹出供用户直接操作。如果一个简单的需求,在笔者看来也是很容易实现的。然后现实总是残酷的。

因为这个动画执行时间有300ms,所以笔者的做法就是点击页面那个元素时,开一个310ms延时器。代码写完后,谷歌模拟器测试一切正常;安卓手机测试一切正常;苹果手机测试不正常。

苹果手机竟然没有获取焦点弹出软键盘。同一台苹果多次测试、多台不同的苹果测试,结果还是一样。谷歌模拟器和安卓手机没有问题,那么可以说代码是绝对没有问题的。

为了知道问题出在哪,多方搜索后找到来自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出于安全机制的原因不能通过setTimeout来触发元素获取焦点。

为了证明这个答案的真实性,笔者做了个小demo,测试结果确实是正确的。

看到这里,也告诉我们一个道理:有些问题不是想当然就能解决的。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: