环境：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. 2021 Duilib最新入门教程（一）Duilib简介

    目录 Duilib解决什么问题? 方案一.自己画界面 方案二.使用标准控件 方案三.使用Duilib框架 Duilib是什么? 先看下Duilib官方简介 再看下DirectUI 百度百科   比起介 ...

  2. 解决MyBatis-Plus 3.3.1中自动生成代码tinyint(1)无法自动转换为Boolean 的办法

    解决方法 1.在测试类中新建一个类MySqlTypeConvertCustom,继承MySqlTypeConvert并实现ITypeConvert后覆盖processTypeConvert方法. 2. ...

  3. NFS存储迁移至GlusterFS

    NFS存储迁移至GlusterFS 前提条件 为防止脑裂,建议使用最低3台节点制作3复制集的存储卷: 在进行存储迁移前,GluseterFS存储节点需先成为k8s集群中的node节点: 存储切换时请勿 ...

  4. java实现Excel定制导出(基于POI的工具类)

    我的需求: 项目中有一些工程表格需要导出,设计到行列合并,定制样式,原有工具类冗余,内聚性强.所以想写一个可以随意定制excel的工具类,工具类满足需求: 对于常用的工程表格有模板格式,可以任意插拔. ...

  5. 抓包一张tcpdump小抄就够了

    作者简介 李先生(Lemon),高级运维工程师(自称),SRE专家(目标),梦想在35岁买一辆保时捷.喜欢钻研底层技术,认为底层基础才是王道.一切新技术都离不开操作系统(CPU.内存.磁盘).网络等. ...

  6. 设置一个两边固定中间自适应的css

    1.两边浮动,中间自动宽度 给左右两个盒子设置左右浮动,中间的盒子不设置宽度,左右两边边距为左右盒子的宽度,中间盒子的位置必须写在右盒子下面,不然会把右盒子挤下去 如:   <div class ...

  7. TCP 延迟

    https://mp.weixin.qq.com/s/fKWJrDNSAZjLsyobolIQKw 直击案发现场!TCP 10倍延迟的真相是? 原创 蛰剑 阿里技术 2019-11-01      

  8. Property attribute.

    class property(object): """ Property attribute. fget function to be used for getting ...

  9. python基础（数据类型，while，if）

    python基础初识. 1,运行python代码. 在d盘下创建一个t1.py文件内容是: print('hello world') 打开windows命令行输入cmd,确定后 写入代码python ...

  10. 静默安装Oracle也没那么恐怖

    几种必须静默安装的情况 服务器为了减少资源占用,没安装图形组件 不能进入机房,只能远程SSH 想炫(Z)耀(B),静默安装显得有技术含量 磁盘分区要求 如没有特别要求,装机时可按如下分区比较好管理 / ...