Html5解决ios系统中input、select、textarea控件在失去焦点时，因为页面上移，导致页面焦点错位的问题

绝地灬酷狼 2023-06-24 08:12 4阅读 0赞

实现：

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

完！！！

解决微信苹果ios，输入框，下拉菜单错位的问题

position属性设置成absolute  
不要设置成fixed

div{
    	position:absolute;
    }

解决input输入后和select选择后页面底部留白的问题  
方法：每次失去焦点的时候页面滚动到0的位置

$("input,textarea,select").blur(function(){
    	document.body.scrollTop = document.documentElement.scrollTop = 0;
    });