环境: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. Java自学笔记1206

    字符串比较string1.equals(string2) 代码如下: 1 package Demo_1206; 2 3 import java.util.Scanner; 4 5 public cla ...

  2. InnoDB事务篇

    1.解决数据更新丢失的问题 1)LBCC:基于锁的并发控制.让操作串行化执行.效率低. 2)MVCC:基于版本的并发控制.使用快照形式.效率高.读写不冲突.主流数据库都是使用的MVCC. 2.Inno ...

  3. MySQL库和表的操作

    MySQL库和表的操作 库操作 创建库 1.1 语法 CREATE DATABASE 数据库名 charset utf8; 1.2 数据库命名规则 可以由字母.数字.下划线.@.#.$ 区分大小写 唯 ...

  4. unity3D进阶

    前言 在之前的例子中,我们都没有用到unity的精髓,例如地形系统.物理系统.粒子系统等,本文记录unity3D的进阶简单应用 前期准备 https://unity.cn/releases/full/ ...

  5. 前端面试之JavaScript中的闭包!

    前端面试之JavaScript中的闭包! 闭包 闭包( closure )指有权访问另一个函数作用域中变量的函数. ----- JavaScript 高级程序设计 闭包其实可以理解为是一个函数 简单理 ...

  6. 一例 Go 编译器代码优化 bug 定位和修复解析

    https://mp.weixin.qq.com/s/Tyl6dSb7mHBuqqN6WvEuaw

  7. 13 | 实战:单机如何实现管理百万主机的心跳服务? https://time.geekbang.org/column/article/240656

    13 | 实战:单机如何实现管理百万主机的心跳服务? https://time.geekbang.org/column/article/240656

  8. KDB调试 — ARM

    1        寄存器 1.1         通用寄存器 A64指令集可以看到31个64位通用(整数)寄存器,分别是R0-R30. 在64位上下文中,这些寄存器通常使用名称x0-x30来表示; 在 ...

  9. springboot开启多线程配置

    一.配置线程池参数 @EnableAsync @Configuration public class TaskExecutorConfig { @Bean public TaskExecutor ta ...

  10. vue项目在IE下报 [vuex] vuex requires a Promise polyfill in this browser错误

    ie浏览器下报错 vue刚搭建的项目,在谷歌浏览器能够正常访问,但是在ie11等ie浏览器下无法显示页面,打开控制台查看无报错信息,打开仿真一栏,提示[vuex] vuex requires a Pr ...