苹果微信input输入框被键盘遮挡
最近一个项目,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输入框被键盘遮挡的更多相关文章
- 移动端页面input输入框被键盘遮挡问题
<body class="layout-fixed"> <!-- fixed定位的头部 --> <header> </header> ...
- H5页面input输入框含有键盘自带的表情符时显示异常
在做一个关于新闻的评论功能的H5页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没 ...
- h5开发安卓机型点击输入框调起输入法,输入框被键盘遮挡的解决方法
前言: 从以前的项目中找一个问题的解决方案,顺带找到了这个安卓机型调起输入法,页面没有自动上滑导致输入框被弹起的键盘遮挡的解决方案.这个问题只有安卓机型页面中的输入框处于底部(也就是底部键盘区域)的时 ...
- iOS解决表格中TextField,TextView编辑时,输入框被键盘遮挡的问题
方法1:在原来的 UIViewController 内部再添加一层 UITableViewController 代码如下 : // // ViewController.m // 键盘遮挡问题 // / ...
- 控制input输入框光标的位置
一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...
- 微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
- 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )
测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示: input固定底部设计图.png 点击底部input输入框唤 ...
- 移动端H5页面 input 获取焦点时,虚拟键盘挡住input输入框解决方法
在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...
- 移动端H5页面_input获取焦点时,虚拟键盘挡住input输入框解决方法
在移动端h5开发的时候,发现如果input在页面底部,当触发input焦点的时候会弹出系统虚拟键盘,虚拟键盘会遮挡input输入框.这会很影响用户体验,于是在网上找到了如下的解决办法: 方法一:使用w ...
随机推荐
- Excel筛选之后如何下拉递增
1.痛点 Excel表格,通过筛选了之后,再想统计行数,通过单纯的拖动或者填充排序啥的,都无法做到排序或行数递增: 2.解决方案 发现了个excel的公式可以完美解决该问题,赞个,找的好辛苦. 3.大 ...
- shell脚本嵌套expect脚本
#!/bin/sh echo "helo" password='xxxx' ###不能在下面的expect脚本段设置成 set password xxxx否则获取不到变量,单独的e ...
- 与MySQL传统复制相比,GTID有哪些独特的复制姿势?
与MySQL传统复制相比,GTID有哪些独特的复制姿势? http://mp.weixin.qq.com/s/IF1Pld-wGW0q2NiBjMXwfg 陈华军,苏宁云商IT总部资深技术经理,从事数 ...
- python之路 目录
目录 python python_基础总结1 python由来 字符编码 注释 pyc文件 python变量 导入模块 获取用户输入 流程控制if while python 基础2 编码转换 pych ...
- Portal 设置
nodatas 设置agent 状态,其采集指标 agent.alive 上报中断时,通知用户. hostgroups设置 模版设置
- Linux环境安装Eclipse及配置hadoop插件
摘要:第一次使用hadoop,另外eclipse也不太熟悉,所以把自己在安装过程中得琐碎记录下来.以备以后查看. 硬软件环境: ▪ 虚拟机: VMware Workstation 11.0.0 bui ...
- multiwii 2.4配置页面中文注释
...
- java 反射机制
1.反射机制是什么: (1)反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能 ...
- 如何在自己的代码中实现分享视频文件或者是图片文件到微信 QQ微博 新浪微博等!!!
首先在文档第一句我先自嘲下 , 我是大傻逼, 弄了两天微信是视频分享,一直被说为啥跟系统的相册分享的不一样,尼玛!!! 这里来说正文,我这里不像多少太多,大家都是程序猿,具体的阔以看代码. 搞代码之前 ...
- 。。。IO流学习之二。。。
fileReader的用法: import static org.junit.Assert.*; import java.io.File; import java.io.FileNotFoundExc ...