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

梦里梦外; 2022-02-05 01:01 1659阅读 0赞

# 前言： #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 1][]

# 解决方法： #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 2][]

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

![20190504015559369.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 3][]

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

![20190504015941754.png][]

# 爬坑过程： #

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

![20190504020730116.png][]

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

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

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

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

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

![20190504021407581.png][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 4][]

![20190504021448953.png][]

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

# 更正： #

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

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

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

![20190504024028627.png][]

不知道什么原因，设置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详细解释[传送门][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190504015349723.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 1]: /images/20220205/5ae561df2a8845e1bf25d52591bb31e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 2]: /images/20220205/d19f6d910ae144bc8330292233388c2a.png
[20190504015559369.png]: /images/20220205/f98d61f0dd9d475da1ab725ef050b681.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 3]: /images/20220205/290724d778f44941a07311d05c04f478.png
[20190504015941754.png]: /images/20220205/efcf0fe50af8409dbf98fd5b832bb621.png
[20190504020730116.png]: /images/20220205/37fe652bf464426ebc83fee610988964.png
[20190504021407581.png]: /images/20220205/c4001707f18a465082390f7af0b67208.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RDRl9KaW5nRmVuZw_size_16_color_FFFFFF_t_70 4]: /images/20220205/6909c127e4104c928191131063027e56.png
[20190504021448953.png]: /images/20220205/ef021c0aaafb4b4da78885822a32b91d.png
[20190504024028627.png]: /images/20220205/9d5fcef3976e4ff1a42a4d5918f0545b.png
[Link 1]: https://www.jianshu.com/p/6fd2873183e1?utm_source=oschina-app