https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651226929&idx=1&sn=4587bf582dcb235e00592fc49b146632&chksm=bd495ab58a3ed3a348eafa262c28c6467acf50edaf255061e42e1c5dea28ba7a90fb5df43373&mpshare=1&scene=23&srcid=0907GP7tlcpx85ccojX6lVlL#rd

请注意，有一些浏览器会自动处理，有一些又不会，所以为了兼容，首先应该判断Input到底有没有处于【可视高度】的外面，如果是，再处理。但麻烦的是，正常的手机浏览器，如微信、QQ、UC都是自动处理的，反而只有垃圾Android开发的的webview才会出现这种情况。所以很难测试。先记录一下以后再开发吧

1、利用innerHeight 自己 DIY

2、利用 scrollIntoViewIfNeeded()

虚拟键盘 input 挡住的更多相关文章

  1. 【小贴士】虚拟键盘与fixed带给移动端的痛！

    前言 今天来公司的主要目的就是研究虚拟键盘与fixed的问题,期间因为同事问起闭包与事件委托(阻止冒泡)相关问题,便穿插了一篇别的: [小贴士]工作中的”闭包“与事件委托的”阻止冒泡“,有兴趣的朋友可 ...

  2. 移动H5页面，Android手机下，input获取焦点弹出系统虚拟键盘时，挡住input解决方法

    最近在写移动端页面的时候,遇到一个问题,在Android手机下,虚拟键盘会将input框遮挡住,具体情况如下图所示: 正常页面显示  IOS端显示情况 Android端显示情况 解决方式: <t ...

  3. 移动端ios针对input虚拟键盘挡住的问题

    写移动端的时候发现input的虚拟键盘对Ios的手机不是很友好 我的是苹果6 点击的时候经常会挡住input框 针对这个问题找了很多发现都没效果 最后发现用下面这段js就可以解决了 $("i ...

  4. 移动端H5页面 input 获取焦点时，虚拟键盘挡住input输入框解决方法

    在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...

  5. 移动端H5页面_input获取焦点时，虚拟键盘挡住input输入框解决方法

    在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...

  6. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  7. iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案

    问题描述 iOS系统下,移动web页面,inpu获取焦点弹出系统虚拟键盘时,偶尔会出现挡住input的情况,尽管概率不大,但是十分影响用户体验. 问题重现 原始页面:页面中有header.main.f ...

  8. 手机端input获取焦点弹出键盘时挡住input解决方案

    问题重现 原始页面:页面中有header.main.footer三部分,其中 header 和 footer 通过 position: fixed; 定位在浏览器顶部和底部. 其中,footer 中有 ...

  9. 【土旦】vue 解决ios H5底部输入框 获取焦点时弹出虚拟键盘挡住输入框 以及监听键盘收起事件

    问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图 解决方法: html: <input type=&quo ...

随机推荐

  1. 更改CentOS 6.3 yum源为国内 阿里云源

    将CentOS的 yum源 更换为 阿里云源 1.备份 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.b ...

  2. PHP：面向对象学习笔记，重点模拟Mixin（掺入）

    背景 相对于Python.Node和Ruby来说PHP算是一门容易学习和使用的语言,因为这个特点也使其成为WEB开发领域的佼佼者,本文记录一下我对PHP面向对象部分的学习笔记. 先来一个复杂的例子:M ...

  3. ZZY的宠物（矩阵运算+快速幂）

    E :ZZY的宠物 描述 ZZY领养了一对刚刚出生的不知名小宠物..巨萌巨可爱!!...小宠物的生命为5个单位时间并且不会在中间出意外翘辫子(如: 从0出生能活到5但活不到6)..小宠物经过2个单位时 ...

  4. Forms.Timer、Timers.Timer、Threading.Timer的研究

    .NET Framework里面提供了三种Timer System.Windows.Forms.Timer System.Timers.Timer System.Threading.Timer 一.S ...

  5. WebUploader文件图片上传插件的使用

    最近在项目中用到了百度的文件图片上传插件WebUploader.分享给大家 需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUp ...

  6. 【架构】OpenResty相关资料

    OpenResty最佳实践 在2012年的时候,我加入到奇虎360公司,为新的产品做技术选型.由于之前一直混迹在python圈子里面,也接触过nginx c模块的高性能开发,一直想找到一个兼备pyth ...

  7. /etc/ssh/sshd_config 配置（ssh连接）

    # Package generated configuration file# See the sshd_config(5) manpage for details # What ports, IPs ...

  8. C#中Split用法~字符串分隔

    1.用字符串分隔: using System.Text.RegularExpressions;string str="aaajsbbbjsccc";string[] sArray= ...

  9. VC中关于预编译头文件的概括，以及无法打开预编译头文件的错误解决

    1.预编译头文件 在VC中编译器一般都是以文件为单位进行编译,如果修改了工程中的一个文件,那么将导致所有文件都要从新编译,这样的编译将耗费很长时间.为了提高编译速度,将那些不常被修改,比较稳定,文件单 ...

  10. GIS中要素的捕捉以及C++实现

    这篇文章早在去年就写出来了,但是由于当时毕业论文有一段是直接引用了我的这篇文章,怕引起查重的麻烦就删掉了,在此,重新挂出来和大家一起分享. 要素的选择,也称为要素的捕捉,在CAD.计算机图形学和地理信 ...