手机浏览器呼出软键盘遮挡住输入框问题。

最新推荐文章于 2021-12-14 16:12:09 发布

asia_123456

最新推荐文章于 2021-12-14 16:12:09 发布

阅读量578

点赞数

分类专栏：前端手机浏览器文章标签：前端手机浏览器问题

本文链接：https://blog.csdn.net/asia_123456/article/details/103185471

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

手机浏览器

1 篇文章 0 订阅

订阅专栏

 在手机浏览器中如果我们给body设置了高度，然后我们通过input输入框呼出软键盘，如果输入框在页面下方，内容会被软键盘遮挡住，我们只有滑动滚动条才能看到输入框，这样会很麻烦，也不利于用户体验。

我们可以通过scrollIntoViewIfNeeded()方法来解决问题。

Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。
Element.scrollIntoViewIfNeeded()方法也是用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。但如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。此方法是标准的Element.scrollIntoView()方法的专有变体。
因而再有什么回到顶部、去到置顶位置和键盘弹出挡住输入框之类的需求，都可以简单解决了。

<body>
	<div class="box">
		<ul></ul>
	</div>
</body>
   <script>
   	$(function(){
   		for(var i=0;i<30;i++){
   			$(".box ul").append('<li><input type="text" /></li>')
   		}
   		
   		 $(".box li input[type='text']").on("focus",function(){
	   	  	 var target = this;
			  setTimeout(function(){
		        target.scrollIntoViewIfNeeded();
		      },300);
	   	  })
   	})  	 
   </script>

asia_123456

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
手机浏览器呼出软键盘遮挡住输入框问题。

在手机浏览器中如果我们给body设置了高度，然后我们通过input输入框呼出软键盘，如果输入框在页面下方，内容会被软键盘遮挡住，我们只有滑动滚动条才能看到输入框，这样会很麻烦，也不利于用户体验。我们可以通过scrollIntoViewIfNeeded()方法来解决问题。Element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内。Element.scrol...
复制链接

扫一扫