欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

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

程序员文章站 2022-04-10 15:01:31
移动端ios输入框日常开发中使用input固定定位在底部遇到的一些问题,话不多说上代码 ~~~~(大佬勿喷)输入框收起时底部留白一大块let scrollY = null;$('.animated').focus(function(){scrollY = $(this).offset().top// 记录获取焦点时页面距离顶部的距离});$('.animated').blur(function(){window.scroll(0, scrollY);...

移动端ios输入框

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

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

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

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

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

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

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

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

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

完整代码

		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