最近一个项目,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. log4j+mongodb

    maven 配置: <dependency> <groupId>org.mongodb</groupId> <artifactId>mongo-java ...

  2. ASP.NET corrupt assembly “Could not load file or assembly App_Web_*

    以下是从overFlow 复制过来的问题 I've read through many of the other questions posted on the same issue, but I s ...

  3. css3水波纹效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 深入了解DSP与ARM的区别与联系

    http://www.eeboard.com/bbs/thread-25219-1-1.html ARM微处理器的体系结构 了解DSP的体系结构 深入了解DSP与ARM的区别与联系 2011-09-3 ...

  5. HBA相关知识

    HBA使用详解: 一般的AIX客户端支持的HBA为Emulex HBA卡和交换机硬件确保连接成功的标志: A. 如果是 Emulex卡,卡上的绿灯常亮,黄灯闪烁. B. 如果是 QLogic卡,卡上的 ...

  6. Oracle分页查询

    1.无ORDER BY排序的写法.(效率最高) 经过测试,此方法成本最低,只嵌套一层,速度最快!即使查询的数据量再大,也几乎不受影响,速度依然! sql语句如下: SELECT * FROM (Sel ...

  7. XPath 实例

    在本节,让我们通过实例来学习一些基础的 XPath 语法. XML实例文档 我们将在下面的例子中使用这个 XML 文档: "books.xml" : <?xml versio ...

  8. Android 自定义view(二) —— attr 使用

    前言: attr 在前一篇文章<Android 自定义view -- attr理解>已经简单的进行了介绍和创建,那么这篇文章就来一步步说说attr的简单使用吧 自定义view简单实现步骤 ...

  9. Jquery,jquery-cookie.js 做的点击记住用户名和密码!

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. C# 把背景为白色的图片变成透明图片

    Image Imageimage; Imageimage = System.Drawing.Image.FromFile(@"C:\A.JPG"); Bitmap bitmap = ...