IOS input输入时弹出键盘挤压页面,使页面失去焦点解决方法
2019-05-06 14:30
357 查看
前端在做手机适配时,通常IOS的适配很麻烦,我之前就遇到一个问题;
在安卓手机上点击input是,手机弹出键盘,页面不会与任何变化;
当苹果手机点击input是弹出的键盘,会将页面往上挤压一段距离,输入完成后,关闭键盘,你会发现页面会出现纵向拉条,之所以出现这个,就是因为键盘弹出是页面受到了一定程度的挤压,所以我们应该 在input失去焦点是将纵向拉条距离顶部的距离归零,但还有一个问题,就是有时这个事件触发不了,所以给予这个事件一个定时器就好了。
[code]$("input,select").blur(function(){ setTimeout(function() { var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); }, 100); })
相关文章推荐
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()
- iOS下Html页面中input获取焦点弹出键盘时挡问题
- 记录H5页面IOS中input输入框失去焦点后,键盘隐藏
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案
- 移动H5页面,Android手机下,input获取焦点弹出系统虚拟键盘时,挡住input解决方法
- iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案—scrollIntoView()
- [Cordova/Phonegap] Cordova iOS 应用在第三方输入法的键盘弹出(点击输入框)时,页面不上移,导致输入框被键盘遮挡 的解决办法
- iOS模拟器中修改textField键盘类型为中文输入和键盘弹出方法
- IOS开发中键盘输入屏幕上移的解决方法
- iOS 键盘弹出遮挡UITextField解决方法
- IOS开发键盘弹出时遮住输入框的问题的一种解决方法。
- HTML页面中input元素在android浏览器中获得焦点后页面放大解决方法
- input中blur失去焦点事件与点击事件冲突的解决方法
- 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题
- IOS和安卓WEB页面,input输入框被软键盘遮挡解决方法
- 移动端开发,IOS、iPhone,表单input元素获取焦点时页面被放大的解决办法。
- webapp之登录页面当input获得焦点时,顶部版权文本被顶上去 的解决方法
- IOS 固定定位底部input输入框,获取焦点时弹出的输入法键盘挡住input
- 【转】EditText获取焦点不自动弹出键盘设置--失去焦点的方法,不错