最近一个项目,input输入框需要在页面的最下面(position:fixed),这样,当键盘获取焦点的时候,

苹果自带键盘不会挡住输入框,但是搜狗输入法的键盘就会挡住。可以用以下方法解决:

document.activeElement.scrollIntoViewIfNeeded();

 当input标签获取焦点时,调用以上方法,就可调整当前页面,让页面中元素不被键盘挡住。

这个方法是干什么的呢?MDN是这样解释的:

The Element.scrollIntoViewIfNeeded() method scrolls the current element into the visible area of the browser window if it's not already within the visible area of the browser window. If the element is already within the visible area of the browser window, then no scrolling takes place. 原文

翻译过来大致意思是:

当当前元素没有在浏览器可视区域内,Element.scrollIntoViewIfNeeded()方法会滚动当前元素,使其进入浏览器的可视区域,如果当前元素已经位于当前浏览器可视区域内,该事件不会执行。

----------------------------------------------2017-01-07更新-------------------------------

1月6号得知消息:微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核

然后在手机上实际测试了一下,现有项目兼容性如何,结果发现用上文方法解决的input被遮挡失效了,后来我又试了试Element.scrollIntoView方法,结果好用,兼容UIWebview。

苹果微信input输入框被键盘遮挡的更多相关文章

  1. 移动端页面input输入框被键盘遮挡问题

    <body class="layout-fixed"> <!-- fixed定位的头部 --> <header> </header> ...

  2. H5页面input输入框含有键盘自带的表情符时显示异常

    在做一个关于新闻的评论功能的H5页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没 ...

  3. h5开发安卓机型点击输入框调起输入法,输入框被键盘遮挡的解决方法

    前言: 从以前的项目中找一个问题的解决方案,顺带找到了这个安卓机型调起输入法,页面没有自动上滑导致输入框被弹起的键盘遮挡的解决方案.这个问题只有安卓机型页面中的输入框处于底部(也就是底部键盘区域)的时 ...

  4. iOS解决表格中TextField,TextView编辑时,输入框被键盘遮挡的问题

    方法1:在原来的 UIViewController 内部再添加一层 UITableViewController 代码如下 : // // ViewController.m // 键盘遮挡问题 // / ...

  5. 控制input输入框光标的位置

    一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...

  6. 微信小程序基础之input输入框控件

    今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...

  7. 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )

    测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示:   input固定底部设计图.png 点击底部input输入框唤 ...

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

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

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

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

随机推荐

  1. 第一篇:白话tornado源码之一个脚本引发的血案

    本系列博文计划: 1.剖析基于Python的Web框架Tornado的源码 2.为Python开发一个完善的MVC框架 首先将带着大家一起来剖析基于python编写的Web框架 tornado ,本着 ...

  2. H5唤起APP一些坑

    $(function () { function _openAppUrl(appUrl){ var ua = navigator.userAgent.toLocaleLowerCase(), open ...

  3. iOS计算完整文字高度(适应iOS 10)

    动态计算文字的高度:(切记LineSapcing>=2,不然会显示不全) +(CGSize) boundingALLRectWithSize:(NSString*) txt Font:(UIFo ...

  4. 使用Charles检测HTTPS网站的数据包

    1.下载Charles 下载地址:https://www.charlesproxy.com/download/ 2.安装Charles的证书 选择Help->SSL Proxying->I ...

  5. sp_helpdb

    语法 sp_helpdb [ [ @dbname= ] 'name' ] 参数 [@dbname=] 'name' 是要为其提供信息的数据库名称.name 的数据类型为 sysname,无默认值.如果 ...

  6. ferret不能创建txt文本

    设置文件夹权限为可读写也没用~郁闷中.

  7. 使用IIS发布WCF服务

    上一篇是Windows服务为宿主的WCF服务,现在用IIS为宿主发布WCF服务. 第一步:肯定是新建一个WCF服务啦[是WCF服务应用程序],然后在解决方案上再次添加一个新项目[我们选择WCF服务库, ...

  8. win7&win8.1 x64位系统下在VS2010下配置MPICH2&测试&解决scanf不能输入

    1.       Mpich下载地址http://www.mpich.org/downloads/,下载mpich2-1.4.1p1-win-x86-64(32位系统请下载mpich2-1.4.1p1 ...

  9. Flex 布局2

    Flex 布局2     你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇>.我的主要参考资料是Landon Sch ...

  10. 3.MongoDB下Windows下的安装

    由于博主目前使用的是Windows的系统,没有使用Linux等其它的系统,因此此安装配置和开发使用,均是在Windows下进行的,以后在使用其它的系统的时候,再将其它系统的配置的使用补充上来. 1.下 ...