IOS键盘兼容问题

原创于 2024-01-17 10:35:48 发布 · 526 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #前端 #vue.js

文章讲述了如何通过JavaScript在H5页面中，针对iOS系统，当input或textarea失去焦点时，自动调整页面滚动，避免键盘收起后留白的问题，实现方法是使用blur事件和定时器控制滚动位置。

12+系统 H5调用原生键盘，键盘收起后留白

解决思路：通过判断环境为ios系统，为input，textarea增加blur事件，失去焦点，页面自动滚动到原来的位置。

if (Device.isIOS()) {
	$(".customized-input-box")
	  .unbind()
	  .on("blur", function () {
	  var currentPosition, timer;
	  var speed = 1;
	  timer = setInterval(function () {
	  currentPosition =
	  document.documentElement.scrollTop || document.body.scrollTop;
	  currentPosition -= speed;
	  window.scrollTo(0, currentPosition);
	  currentPosition += speed;
	  window.scrollTo(0, currentPosition);
	  clearInterval(timer);
		}, 1);
	});
}