关于mpvue使用Vant组件库的Field输入框组件自动唤起手机软键盘问题分析

前言：

问题场景：需要在本页面点击一个div，动态show一个遮罩层，遮罩层里面有一个输入框，输入框使用Vant的Field组件写的。过程中并没有页面跳转。（本问题场景出现在mpvue中，在vue、H5等其他场景同样可以借鉴。）

 

解决方法：

在template里面引入对应组件（本文用的Vant，可以用原生Input，或者其他组件）

在data ()里面设置聚焦初始为false

在methods中定义点击方法，目的让input获取焦点弹出软键盘

在methods中定义关闭遮罩层是的方法，目的让input失去焦点

爬坑过程：

开始 并未采用setTimeout，而是直接this.inputCodefocus = true，发现当遮罩层一直保持打开情况下，首次进入该页面是可以聚焦的，但是关闭遮罩，在点开（页面不跳转了）就不能获取焦点，相当于是一次性的。

这种情况百思不得其解~~~

自我感觉原因为：this.popshow=true时，遮罩层打开，如果此时同时设置this.inputCodefocus = true，二者在同一个线程，执行速度相当快，遮罩层是一个组件，事件还未触发，this.inputCodefocus = true已经让input聚焦，但是由于遮罩层还未打开，input聚焦失败。简单点说，聚焦在遮罩层打开之前执行了。

偶然想起之前的一个项目遇到过类似的渲染开销问题

解决办法，用setTimeout开一个新线程，将其变成异步代码，等遮罩层打开再执行input聚焦操作。（this.popshow=true打开遮罩层，this.inputCodefocus=true聚焦）

别为var _this=this是什么，因为可以用es6箭头函数代替

最后看一下setTimeout道理怎么执行的，其顺序如何

以后再遇到类似有渲染开销问题的时候，记住可以setTimeout来处理。（这里并不用加延时，因为目的是变成异步代码，让同步代码先执行完，或渲染完成，再执行里面的代码）

更正：

在测试的时候，发现安卓手机没有问题，但是苹果手机，出现自动唤起键盘之后键盘将整体内容往上顶。

经过查阅网上资料，也没有找到合适的解决方法。

无奈之下，设置延时300ms解决问题

不知道什么原因，设置100ms、200ms不起作用，直到设置300ms（难道这就是300ms延时问题？哈哈，又碰到ios坑了）

 

``````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````

下面是300ms问题的解释：

2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。

双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。双击缩放，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者单击跳转的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。

鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。

300ms详细解释传送门