【原创】修复ios输入框获取焦点时不支持fixed的bug
前些日子,做了一个手机站的项目,有一个页面是这样的,
有一个固定(position:fixed)的头部和底部导航,中间是一些表单内容,没啥特别的。但是到了ios中,正常滚动页面没有问题,一旦触发了文本框,出现输入法小键盘时,就会变成了这样:
就是,头部和底部的位置错乱了,不再fixed了。网上搜索了一翻,原来在ios的safari和webview中,对position:fixed的支持不是很好,在ios5之前甚至还不支持position:fixed。其解决办法也有,一种是把中间部分也加上fixed,并加上overflow:scroll,测试后,不管用。
还有就是把头部和底部写成absolute,然后用js模拟fixed,免不了要获取滚动的高度等一些麻烦语句,而且还是有bug,滚动时会跳动。
最后,只能采用一种不太理想的解决方法,算是某种意义上的忽略这个问题吧。就是当输入框获取焦点时,另头部底部为relative,当输入完成,失去焦点时,再重新变回fixed。其实,用户在填写文本框时,不大会注意其他信息,只会专心的操作输入法小键盘,所以,这时头和尾是不是固定的没什么关系,输完了,页面又恢复了常态。思来想去,这是最可行,最简单的解决办法了。当然,是需要判断一下是否是ios环境的。代码如下:
<script>
$(document).ready(function(){
//修复ios输入框获取焦点时不支持fixed的bug
var isIOS=(/iphone|ipad/gi).test(navigator.appVersion);
if(isIOS){
$('.js_wrap').on('focus','input',function(){//js_wrap是中间含有文本框的区域
$('header').css("position","relative");
$('footer').css("position","relative");
}).on('focusout','input',function(){
$('header').css("position","fixed");
$('footer').css("position","fixed");
});
}
});
</script>
- ios颜色生成图片的方法
- 在写一个iOS应用之前必须做的7件事(附相关资源)
- 在写一个iOS应用之前必须做的7件事(附相关资源)
- iOS- 多线程中如何去保证线程安全
- iOS 开发 Pch 文件的正确使用
- iOS 简单文件操作
- iOS开发--语言国际化-最新使用方法
- iOS检测相机或者相册可用
- iOS开发之音轨合成(音频与音频,音频与视频)
- iOS获取健康步数从加速计到healthkit
- 使用CocoaPods遇到的几个坑,记录一下
- iOS的内存管理
- Block小结
- iOS多线程编程之GCD的使用
- ios移动开发的提示弹出框(简单明了方便调试)
- iOS 第三方框架管理cocoapods 关于Mac 10.11 系统升级无法使用的问题
- ios移动开发的提示弹出框(简单明了方便调试)
- CocoaLumberjack使用以及日志文件获取
- 数据解析及model的封装
- iOS_Runtime