环境: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. nmap的理解与利用(初级)

    在命令窗口下输入命令等待,可以用回车来查看进度 nmap进行探测之前要把域名通过dns服务器解析为ip地址,我们也可以使用指定的dns服务器进行解析. nmap --dns-servers 主机地址 ...

  2. perl打开本地/服务器图片

    index.html <html> <body> <h2> perl read img </h2> <img src = "displa ...

  3. HTML基础复习4

    CSS的应用 模块的边框 设置边框样式 border-style::如果是一个值那么表示四个边的样式都一样:如果是两个值那么第一个值代表上下,第二个值代表左右:如果是三个值,第一个值代表上,第二个值代 ...

  4. SpringBoot @Value 解析集合配置

    引自:https://jitwxs.cn/d6d760c4.html 一.前言 在日常开发中,经常会遇到需要在配置文件中,存储 List 或是 Map 这种类型的数据.Spring 原生是支持这种数据 ...

  5. 2021年【线上】第一性原理vasp技术实战培训班

    材料模拟分子动力学课程 3月19号--22号 远程在线课 lammps分子动力学课程 3月12号--15号 远程在线课 第一性原理VASP实战课 3月25号-28号 远程在线课 量子化学Gaussia ...

  6. 数据库性能调优之始: analyze统计信息

    摘要:本文简单介绍一下什么是统计信息.统计信息记录了什么.为什么要收集统计信息.怎么收集统计信息以及什么时候收集统计信息. 1 WHY:为什么需要统计信息 1.1 query执行流程 下图描述了Gau ...

  7. 一步步使用SpringBoot结合Vue实现登录和用户管理功能

    前后端分离开发是当今开发的主流.本篇文章从零开始,一步步使用SpringBoot结合Vue来实现日常开发中最常见的登录功能,以及登录之后对用户的管理功能.通过这个例子,可以快速入门SpringBoot ...

  8. docker容器的基本命令

      #安装docker yum -y install docker systemctl start docker.service systemctl status docker systemctl e ...

  9. MySQL调优用户监控之show processlist

    简介 show processlist显示这台MySQL正在连接的用户: mysql> show processlist; +----+------+-----------+-------+-- ...

  10. python_3 装饰器之初次见面

    装饰器 定义:本质是函数,(只不过是用来装饰其他函数而已),就是为其他函数添加附加功能 原则: 1. 不能修改被修饰函数的源代码 2.不能修改被修饰函数的调用方式 实现装饰器的知识储备 1.函数即&q ...