最近一个项目,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. centos7优化内核参数详解

    cat /etc/sysctl.conf #CTCDN系统优化参数 #关闭ipv6 net.ipv6.conf.all.disable_ipv6 = 1 net.ipv6.conf.default.d ...

  2. oracle客户端安装配置 tnsnames.ora文件

    Oracle客户端tnsnames.ora连接配置 Oracle90的在C:\Oracle\ora90\network\ADMIN下面 Oracel10g的在D:\oracle\product\10. ...

  3. iOS - UIButton设置文字标题下划线以及下划线颜色

    创建button设置可以折行显示 - (void)viewDidLoad { [super viewDidLoad]; UIButton * button = [[UIButton alloc] in ...

  4. xl2tp部署

    参考 http://blog.51yip.com/linux/1795.html 说到VPN,就会想到google,满心的疼.以前写过一篇关于vpn的文单,请参考:centos5.5 vpn 安装配置 ...

  5. python入门到精通[三]:基础学习(2)

    摘要:Python基础学习:列表.元组.字典.函数.序列化.正则.模块. 上一节学习了字符串.流程控制.文件及目录操作,这节介绍下列表.元组.字典.函数.序列化.正则.模块. 1.列表 python中 ...

  6. getPhysicalNumberOfCells 与 getLastCellNum的区别

    用org.apache.poi的包做excel导入,无意间发明若是excel文件中有空列,空列后面的数据全部读不到. 查来查去本来是HSSFRow供给两个办法:getPhysicalNumberOfC ...

  7. Java Thread 多线程 介绍

    1.线程概述 几乎所有的操作系统都支持同时运行多个任务,一个任务通常就是一个程序,每个运行中的程序就是一个进程. 当一个程序运行时,内部可能包含了多个顺序执行流,每个顺序执行流就是一个线程. 2.线程 ...

  8. (一)sql入门 导读

    从转行做软件始,就开始接触sql,但还是不怎么深入,回忆3月份找工作的时候,左关联都没有写出来,真是丢脸,以此博客做个认真的开始. 以后的日子,遇到了圆柱体的空心物体,我就应该联想到一样东西,那就是数 ...

  9. asp.net sqlite 当插入数据后的第一次访问会变的很慢!

    <add key="ConnectionStringSQLite" value="data source=|path|DB/XXX.db;Version=3;&qu ...

  10. <connectionStrings> <appSettings> 读取方法

    C#中ConnectionStrings和AppSettings的区别 时间 2013-03-07 15:57:00  博客园精华区 原文  http://www.cnblogs.com/bindot ...