最近一个项目,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. swift:谈谈swift几种常见属性的区别

    一.前奏 Swift作为一门新语言,经过几年的发展,逐渐趋于完善,目前已经更新到3.0版本,它汇集许多其他语言的特点,例如JS.Paython.C++等,完全区别于OC.个人感觉它没有完全的OOP和O ...

  2. iOS:基于CoreText的排版引擎

    一.CoreText的简介 CoreText是用于处理文字和字体的底层技术.它直接和Core Graphics(又被称为Quartz)打交道.Quartz是一个2D图形渲染引擎,能够处理OSX和iOS ...

  3. Java提高篇——JVM加载class文件的原理机制

    在面试java工程师的时候,这道题经常被问到,故需特别注意. 1.JVM 简介 JVM 是我们Javaer 的最基本功底了,刚开始学Java 的时候,一般都是从“Hello World ”开始的,然后 ...

  4. Angular动态编译Html

    //取得scope,有时可以使用this var scope=angular.element(this).scope(); var el= $compile(html)(scope); //加入到Do ...

  5. 基于Java Netty框架构建高性能的部标808协议的GPS服务器

    使用Java语言开发一个高质量和高性能的jt808 协议的GPS通信服务器,并不是一件简单容易的事情,开发出来一段程序和能够承受数十万台车载接入是两码事,除去开发部标808协议的固有复杂性和几个月长周 ...

  6. HBase的Write Ahead Log (WAL) —— 整体架构、线程模型

    解决的问题 HBase的Write Ahead Log (WAL)提供了一种高并发.持久化的日志保存与回放机制.每一个业务数据的写入操作(PUT / DELETE)执行前,都会记账在WAL中. 如果出 ...

  7. My 1st webUI try

    1. Add three control to the UI: StartTime EndTime Weekdays: 2015-11-17 20:26:40 data-model: Html5在ht ...

  8. 添加系统右键菜单项 管理员取得所有权(W)(带盾牌)

    @color 0A @title 添加系统右键菜单项 管理员取得所有权(^&W)(带盾牌) by wjshan0808 @echo off echo * >nul reg add HKC ...

  9. 在IE下,如果在readonly的input里面键入backspace键,会触发history.back()

    在IE下,如果在readonly的input里面键入backspace键,会触发history.back(), 用以下jQuery代码修正之 $("input[readOnly]" ...

  10. Apache与Tomcat的整合

    一 Apache与Tomcat比较联系 apache支持静态页,tomcat支持动态的,比如servlet等. 一般使用apache+tomcat的话,apache只是作为一个转发,对jsp的处理是由 ...