移动端ios输入框遇到的一些问题

移动端ios输入框

日常开发中使用input固定定位在底部遇到的一些问题，话不多说上代码 ~~~~（大佬勿喷）

输入框收起时底部留白一大块

		let scrollY = null;
		$('.animated').focus(function(){
			scrollY = $(this).offset().top		// 记录获取焦点时页面距离顶部的距离
		});
		$('.animated').blur(function(){
			window.scroll(0, scrollY);			//失焦后强制让页面归位
		});

输入框获取焦点时会被页面遮盖

		$('.animated').focus(function(){
			scrollY = $(this).offset().top
			// 虚拟键盘挡住input输入框解决方法
			setTimeout(function(){  
		        window.scrollTo(0,document.body.clientHeight);  
		    }, 500);
		});

输入框获取焦点时滑动页面输入框跟着页面滚动

这里我是用了当输入框失去焦点时软键盘回收，至于怎么让页面滑动而输入框不跟着动我也没找到好办法，如果有大佬知道的话也可以分享下~~~~

完整代码

		let scrollY = null;
		
		$('.animated').focus(function(){
			scrollY = $(this).offset().top
			// 虚拟键盘挡住input输入框解决方法
			setTimeout(function(){  
		        window.scrollTo(0,document.body.clientHeight);  
		    }, 500);
		});

		$('.animated').blur(function(){
			window.scroll(0, scrollY);			//失焦后强制让页面归位
		});

		$(document).on('touchstart', function(e){
			if(e.target.nodeName.toLowerCase() !== 'textarea'){
				if($('.animated').is(':focus')){
					$('.animated').blur()
				 	return
				}
			}
		})

哈哈 以上就是我的解决方法 后续想到别的再补充~~~

本文地址：https://blog.csdn.net/weixin_45412615/article/details/107557426