移动端webapp，在进入某页面后，input框自动获取焦点并弹出数字键盘

“前端小记”----  -----

****************紧急更新********************

最近收到好多反馈，通过多种机型、系统的测试和了解，发现了一些东西，拿出来和大家分享一下。

据我目前测试得知，如果没有通过某种用户交互，手机不会（触发软键盘弹起）。非用户交互的当下触发focus，但设置另一个元素的onClick事件，就能把focus事件带起来。

意思就是，用户进入页面后，必须有一次和用户的交互，之后才能自动获取焦点并弹出软键盘。

举个例子：

比如我现在有input框，想让它自动获取焦点，并弹出软键盘，但是不能一进页面就让他获取焦点，这种行不通，因为没有用户交互，但是如果说，这个input框开始的时候是隐藏的，我点击其他地方，让input框显示，并且使其获取焦点，弹出软键盘，这个方式就是可行的，因为中间存在一次用户交互。

实在抱歉，之前误导了很多同学，在此对大家伙说一声抱歉。

下面的解决方案在我们项目里可以用，也是因为上面的原因。

      在做项目的过程中，需求文档有个要求是，当进入页面后，第一个行input框要自动获取焦点，并弹出数字软键盘。

           个人认为这个问题，大家做移动端的时候应该会遇到，今天拿出来说说我们遇到的这个小bug。

一个相对很简单的需求，但是值得记录一下，因为在此我们还是遇到了一些hack的。

先说一下上面的这个问题的基础解决方案：

         autofocus 属性   :   文本输入字段被设置为当页面加载时获得焦点

           这一行代码其实就够了！

但是问题来了、、

问题点：

       android系统下

         QQ、uc浏览器，input输入框中需要页面进入即自动弹出数字软键盘，利用input标签属性autofocus=”autofocus”，经真机测试，依然无法弹出软键盘。

解决方案：

         1、利用要获得焦点的input框添加一个focus()，此方法在chrome浏览器下无任何问题，但是在QQ、uc浏览器下虽然获取了焦点，但是无法弹出数字软键盘。

         2、利用setTimeOut()开一个定时器的方法，但是，android手机参差不齐，性能问题严重，不可控以及容错率太低，所以此方法比较不靠谱，不建议使用。

         3、利用trigge()方法，对要获得焦点的input框，调用一次”click”事件，既可解决上述问题。

              xxxxxxxx.el.find('#c_payment_cardbin_input') .trigger("click").focus()；

以上就是我们此次项目的解决方案，网上查了一些，但是也没找到更好的方法，个人感觉还是自己写的这个比较靠谱一些，不过上述方法能实现我们的项目需求，而且也能很好的解决万恶的Android机兼容性问题。

---

如果大家有什么更好的方法，希望可以给我留言，分享给我！

注：以上内容版权所有，作者：K丶Aionro，如有转载，请注明出处！谢谢！