js手机键盘遮挡_iphone手机微信页面软键盘遮挡input输入框解决方法
现象描述:iphone手机微信页面,用position: fixed;定位的input或textarea输入框,在获取输入焦点时,会被弹出的输入法软键盘遮挡,导致用户无法看到输入框,效果如图:
简化测试环境:删除页面其它元素,只保留输入框所在的评论框及最基本的控制评论框显示、隐藏的的交互js。
测试发现,输入法软软键盘弹出显示的状态下,即使页面上有加上css:html,body{height:100%;overflow:hidden;}样式控制,还是能看到页面有显示滚动条,往下滑动页面到最底时,输入框才会显示出来。
也就是说页面输入框的position: fixed;定位,在输入法软软键盘弹出显示的状态下失效了。
既然往下滑动页面到最底时,输入框能显示出来,那解决方法就出来了:
输入法软软键盘弹出时(即输入框获得焦点时),把页面的滚动条拉到底部即可,用js实现:
// iphone软键盘遮挡输入框
// 输入框不要加入blur事件,否则会导致"点击提交按钮,输入框无法正常收回"问题
if(navigator.userAgent.indexOf("iPhone")!=-1){
$(".form-input").focus(function(event) {
var _this = this;
typeof(timer) !="undefined" && clearTimeout(timer);
// 400:预留软键盘弹出时间
timer = setTimeout(function() {
document.body.scrollTop = document.body.scrollHeight;
}, 400);
})
}
这里要注意:
有加入setTimeout 400ms的预留软键盘弹出时间;
输入框不要加入blur事件,否则提交按钮会无法响应执行,直接导致出现"点击提交按钮,输入框无法正常收回"的问题。
这对于"fixed在页面底部的输入框"的情况,确实可以解决输入框被弹出的软键盘遮挡的问题,但是如果像一些页面如登录页,一般页面居中位置会显示一些如用户名、密码输入框的布局,用上面的代码可能会出现把最上面的输入框顶到页面可视区域顶部以外。
像这种情况我们可以使用js里面的Element.scrollIntoView() 方法,这方法可以让当前的元素滚动到浏览器窗口的可视区域内的顶部或底部,语法如下:
element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数:true/false
参数alignToTop是一个Boolean值:
如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。
如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。
// iphone软键盘遮挡输入框
if(navigator.userAgent.indexOf("iPhone")!=-1){
var scrTop = document.body.scrollTop;
$(".form-input").focus(function() {
var _this = this;
typeof(timer) !="undefined" && clearTimeout(timer);
// 400:预留软键盘弹出时间
timer = setTimeout(function() {
_this.scrollIntoView(false);
document.body.scrollTop+=70;
}, 400);
}).blur(function() { //设定输入框失去焦点时的事件
document.body.scrollTop = scrTop;
});
}
这里我们使用scrollIntoView(false),将.form-input输入框元素滚动到浏览器窗口的可视区域内的底部,然后再将页面的scrollTop值自加70px,使得input框与页面可视区域的底部保持70px的距离,输入文字时,视觉上更合适。
另外,要注意到setTimeout延时跟停止输入,input失去焦点时的blur事件也是必须的,这可保证scrollIntoView(false)定位正确 和 含有input输入框的弹出层在该input框blur时能够还原回原先的定位位置!
参考文档:
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
js手机键盘遮挡_iphone手机微信页面软键盘遮挡input输入框解决方法相关推荐
- 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)
解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) 参考文章: (1)解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) (2)https://www.cnblogs.com/zouw ...
- vue开发手机页面闪烁_Vue页面加载闪烁问题的解决方法_婳祎_前端开发者
v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换 也就是说,在使用v-if时,若值为false,那 ...
- android荣耀不弹出获取权限提醒,荣耀手机怎么设置锁屏消息提示?附不提示的解决方法...
荣耀手机怎么设置锁屏消息提示?附不提示的解决方法.今天新机汇要来为大家分享一下荣耀手机的锁屏消息设置提醒,这样其实也是为了方便接收消息,不过有的用户在来了消息的情况下,在锁屏状态下并不会提醒,那么这是 ...
- js取iframe 上级页面_原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法...
用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色 ...
- 王者荣耀微信登录服务器无反应,王者荣耀微信登不上去怎么办?登陆失败解决方法...
王者荣耀微信登不上去怎么办?登陆失败解决方法 2017-01-23 作者:说玩小编 来源:说玩网 评论(8条) 我要评论 王者荣耀微信登不上去怎么办?登陆失败解决方法分享.近来S6排位赛进行得如火如荼 ...
- 微信小程序基础之input输入框控件
今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. input输入框 ...
- 微信改密码qq邮箱服务器繁忙,微信无法通过邮件修改密码,解决方法
现在各种智能手机已经成为我们生活中不可或缺的电子产品,现在手机几乎可以满足人们所有的需求,包括娱乐和各种工作需求都可以满足. 微信无法通过邮件修改密码,解决方法 1. 特别是随着各种移动支付平台的出现 ...
- 平台计算机网课视频无法加载,微信电脑版视频无法播放怎么办?微信电脑版视频播放不了的解决方法...
微信无疑是现在时下最流行的聊天软件了.微信也推出了电脑版,跟手机同步消息,适合一些电脑党用微信电脑版聊天分享等操作.而电脑版比手机版的更加简单,同样的实用过程中也会遇到一些问题.比如我就遇到朋友给我分 ...
- es6 去掉空格_微信小程序自动去除input空格的方法
当用户输入账号或者密码的时候,可能会有输入空格的情况,但是实际需要是不能够有空格的,所以我们要做一个去除空格,并且适应所有input的name参数的方法,下面请看源码: wxml: js: verif ...
最新文章
- NLP(3)| seq to seq 模型
- 获取cookie_抢券第一课:三种方法获取Cookie
- python xgboost用法_XGBoost类库使用小结
- Java 多线程 —— 常用并发容器
- 绝大部分博士目前都无法进入大学
- 短文本合并重复(去重)的简单有效做法
- c语言自学教程——博文总结
- java log4j 动态配置_动态更改log4j日志级别
- android viewpager实现画廊效果,ViewPager实现2D、3D画廊效果
- PHP手机号截取前三位后四位
- JAVA通过COM接口操作PPT
- android UI设计图片和文字尺寸px对应dp、sp值换算
- 数据库1NF 2NF 3NF范式解释
- MFC中改变按钮颜色的方法
- 人工智能时代的自我修炼之-有效沟通
- 自己眼中的女朋友VS家长眼中的女朋友
- 我所经历的汶川大地震之三
- 和我一起学Python,一起采集妹子图
- 《谁还能说〈周易〉读不懂、没读懂?》系列论文(三):《周易》象数思维方式演绎中国传统文化(吉 华)...
- 谷歌官方博客:手机的未来
热门文章
- 小程序的坑:wx.reLaunch闪退问题
- python在平面设计中的作用_图像处理在平面设计中的作用
- 大型电商架构亿级流量电商详情页系统实战--redis基础票
- 关于checkedListBox
- 如何检测iPhone设备处于低电量模式
- Postman进行批量测试
- 手机时间用长了会不会没信号服务器,手机卡能用多久?用久磨损了会影响手机信号么?...
- Word 如何添加斜线表头(单/多斜线)
- 电商卖车或成趋势,拼多多卖“劳斯莱斯“就是正确的吗?
- 2019最新pc微信hook教程免费分享