实现:
ios_adapter.js
//问题描述:在IOS12以上的微信端,出现input弹出后结算按钮点击无反应的情况。
//分析:是由于IOS端第三方输入法的软键盘弹出后,焦点无法复位。
//解决微信苹果ios,输入框,下拉菜单错位的问题
//解决input输入后和select选择后页面底部留白的问题
//方法:每次失去焦点的时候页面和元素滚动到0的位置
//判断设备类型
var judgeDeviceType = function(){
var ua = window.navigator.userAgent.toLocaleLowerCase();
var isIOS = /iphone|ipad|ipod/.test(ua);
var isAndroid = /android/.test(ua);
return {isIOS: isIOS, isAndroid: isAndroid};
}();
$(function(){
if(judgeDeviceType.isIOS){
$("input,textarea,select").blur(function(){
document.body.scrollTop = document.documentElement.scrollTop = 0;
});
}
});
在对应页面引入该js
<script type="text/javascript" src="../js/ios_adapter.js"></script>
完!!!
解决微信苹果ios,输入框,下拉菜单错位的问题
position属性设置成absolute
不要设置成fixed
div{
position:absolute;
}
解决input输入后和select选择后页面底部留白的问题
方法:每次失去焦点的时候页面滚动到0的位置
$("input,textarea,select").blur(function(){
document.body.scrollTop = document.documentElement.scrollTop = 0;
});