环境:vue+vant 的H5页面

场景:输入框输入信息时,如登录、注册等表单信息

问题:键盘收回后页面底部留白,导致dialog组件按钮位移,视觉上,其中的按钮无法正常工作

解决方案:监听失去焦点时,让页面滚动到顶部

  HTML:添加失去焦点事件钩子

    <input class="input" placeholder="输入手机号" max="11" min="11" maxlength="11" v-model="mobile" @blur="blurIn"/>
 
  JS:添加失去焦点事件方法
  blurIn() {
    window.scroll(0, 0)
  }

IOS键盘收起后,页面底部留白处理的更多相关文章

  1. h5页面ios键盘弹出收起后页面底部留白问题

    <input placeholder="验证码" type="tel" v-model="verify" maxlength=&quo ...

  2. 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

    前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...

  3. web中ios移动端软键盘收起后,页面内容留白不下滑

    微信里面打开web页面,在ios软键盘收起时,页面键盘位置的内容留白,如下图 这个问题纠结了很久,然后请教了老大(威哥),看到页面老大给出的方案就是代码改变滚动条的位置. 这里就监听键盘收起的事件,来 ...

  4. H5页面移动端IOS键盘收起焦点错位

    出现场景:IOS端,在弹出层点击input时调起键盘页面会被顶上去document.body.scrollOffset大于0,收起键盘时scrollOffset不变,造成焦点错位. 注:安卓手机点击时 ...

  5. IOS微信端软键盘收起后界面按钮失效问题

    问题描述: 1.在vue里封装了一个confirm的弹窗(即如下一个弹窗) 2.发现在IOS微信客户端中打开后,当需要在表单中输入内容的时候,很自然的点击了键盘右上角的[完成]按钮 3.啊~~~,惊人 ...

  6. h5 ios移动端,键盘收起以后页面不归位

    $('input,textarea').on('blur',function(){ window.scroll(0,0); }); $('select').on('change',function() ...

  7. 【JS】310- 使用 focusout 事件,解决 iOS 键盘收起不归位问题

    点击上方"前端自习课"关注,学习起来~ ,0);            }        }, 这时,我们问题得到解决了,当从输入框输入内容,然后点击键盘的完成收起键盘,效果符合我 ...

  8. IOS键盘收起

    1.点击Return按扭时收起键盘 - (BOOL)textFieldShouldReturn:(UITextField *)textField { return [textField resignF ...

  9. iOS推送后页面跳转

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...

随机推荐

  1. SDNU_ACM_ICPC_2021_Winter_Practice_1st [个人赛] 2021.1.19 星期二

    SDNU_ACM_ICPC_2021_Winter_Practice_1st [个人赛] K - Color the ball 题意: 有n个气球,每次都给定两个整数a,b,给a到b内所有的气球涂一个 ...

  2. uni-app通过canvas实现手写签名

    分享一个uni-app实现手写签名的方法 具体代码如下: <template> <view > <view class="title">请在下面 ...

  3. C#高级编程第11版 - 第六章 索引

    [1]6.2 运算符 1.&符在C#里是逻辑与运算.管道符号|在C#里则是逻辑或运算.%运算符用来返回除法运算的余数,因此当x=7时,x%5的值将是2. [2]6.2.1 运算符的简写 1.下 ...

  4. java.io.IOException: Could not find resource com/xxx/xxxMapper.xml

    java.io.IOException: Could not find resource com/xxx/xxxMapper.xml 报错内容: org.apache.ibatis.exception ...

  5. 【SVN】windows 下的SVN常见问题及其解决方法

    1.能提交和更新,但SVN查看log时提示:找不到路径 'svn/XXXX' 双击以清除错误信息 勾选这个选项就好了.因为该路径是通过重命名或者拷贝过来的,倘若不选中,SVN便会尝试同时从当前文件的拷 ...

  6. JetBrains(IEDA、CLion、Pycharm) 学生获得免费使用资格

    JetBrains针对学生推出了免费使用资格,但是很多同学却不知道或者说不知道怎样获得免费资格,只能千辛万苦的去寻找破解密钥,但现在JetBrains针对盗版的封锁越来越严密,很多密钥过一段时间就会失 ...

  7. 常用shell命令及其用法

    ls(lsit) ​ 1.作用:列出文件列表 ​ 2.用法:ls [-a|-A--] [filename|directory] ​ ls ​ ls -a:查看隐藏文件 ​ ls -l:查看文件详细信息 ...

  8. Spring Cloud Config、Apollo、Nacos配置中心选型及对比

    Spring Cloud Config.Apollo.Nacos配置中心选型及对比 1.Nacos 1.1 Nacos主要提供以下四大功能 2.Spring Cloud Config 3.Apollo ...

  9. GeoMesa Spark

    GeoMesa Spark 一.Spark JTS 1.1 示例 1.2配置 1.3 地理空间用户定义的类型和功能 1.4 geojson输出 1.5 Building 二.Spark Core 2. ...

  10. python模块----yagmail模块、smtplib模块 (电子邮件)

    yagmail模块 python标准库发送电子邮件的模块比较复杂,so,许多开源的库提供了更加易用的接口来发送电子邮件,其中yagmail是使用比较广泛的开源项目,yagmail底层依然使用smtpl ...