IOS键盘兼容问题

xixibandian

于 2024-01-17 10:35:48 发布

阅读量493

点赞数 11

文章标签： jquery 前端 vue.js

本文链接：https://blog.csdn.net/xixibandian/article/details/135643556

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
	});
}