zoukankan      html  css  js  c++  java
  • 微信端autofocus虚拟键盘弹出拉高页面

    微信端autofocus虚拟键盘弹出拉高页面

    可以看到在微信端打开我的收银台页面,点击下一步时,会弹出支付密码弹窗,再点击关闭的时候,整个页面都会向上滑。这显然是不正常的。

    首先采用的方法是,input失去焦点或者点击支付密码弹窗左上角X的时候,使用scrollTop定位到页面顶部。

    document.documentElement.scrollTop = document.body.scrollTop = 0
    

    可以看到画面更加魔幻了。有一个页面被虚拟键盘向上推起,又被scroll拉下来的动画。

    同时,我们也有一个疑问,为什么我们明明只是关闭了支付密码的弹窗,会有虚拟键盘弹出来,拉高页面。看了弹窗的相关代码。

    <input type="password" placeholder="请输入支付密码" onChange={this.handleChange.bind(this)}  autoFocus />
    

    从代码中可以看到,input中有autoFocus,可以自动聚焦,并唤起虚拟键盘。

    查阅资料可知:IOS下input的获取焦点存在这样的问题

    来自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.

    最后采用的方案是微信中不自动聚焦。判断是否在微信浏览器中navigator.userAgent.toLowerCase().includes('micromessenger'),如果是的话,就将autoFocus设为false。

  • 相关阅读:
    第十五周学习进度
    梦断代码阅读笔记03
    第二阶段绩效评估
    团队十日冲刺20
    团队十日冲刺19
    团队十日冲刺18
    Java中的变量之成员变量、本地变量与类变量
    Java中new一个对象是一个怎样的过程?JVM中发生了什么?
    HashMap三百问
    容器之List接口下各实现类(Vector,ArrayList 和LinkedList)的线程安全问题
  • 原文地址:https://www.cnblogs.com/lilicat/p/9830002.html
Copyright © 2011-2022 走看看