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. mOByDiC E90C2600 EOBD/OBDII to RS232 gateway

    http://www.ozenelektronik.com/downs/pdf/oe90c2600.pdf Features • Compatible with EOBD/OBDII standard ...

  2. jquery开发之第一个程序

    前一段时间学习了js和css.可是发现好多的程序里面都用到了jquery当时本来想着先吧js弄熟了 再搞这个.后来发现不行,好多的程序好像是有益和自己为难似的,所以我决定接下来认认真真的把jquery ...

  3. matlab画直线，指定斜率与x坐标范围

    闲话不说,直接上代码与图的效果!

  4. AE 打开工具箱工具的对话框

    The best approach to run a system tool—or any tool or model created, and saved in a toolbox from a b ...

  5. android基础知识普及

    1.密度问题及相互转换 测试机 philips w732 480X800 density 1.5 scaledDensity 1.6500001 通过 context.getResources().g ...

  6. 🌅 使用 Dawn 快速搭建 React 项目！

    开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及进行 jsx 语法的转义.当然也可以用 crea ...

  7. jeecms运行出现 Expected to read 4 bytes, read 0 bytes before connection was unexpectedly lost.解决

    在/WEB-INF/config/application-context.xml中添加红色字体内容: <bean id="dataSource" class="co ...

  8. Python性能优化：PyPy、Numba 与 Cython。PyPy的安装及对应pip的安装

    性能优化讨论见参考1:大概意思是,PyPy内置JIT,对纯Python项目兼容性极好,几乎可以直接运行并直接获得性能提升:缺点是对很多C语言库支持性不好.Numba是一个库,可以在运行时将Python ...

  9. SMTP用户枚举原理简介及相关工具

    前言 SMTP是安全测试中比较常见的服务类型,其不安全的配置(未禁用某些命令)会导致用户枚举的问题,这主要是通过SMTP命令进行的.本文将介绍SMTP用户枚举原理以及相关工具. SMTP SMTP命令 ...

  10. js 获取url的get传值函数

    function getvl(name) { var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s| ...