移动端H5 input标签在IOS手机下键盘弹出回拉异常处理

最新推荐文章于 2024-01-31 17:33:35 发布

想必是渣渣宇了

最新推荐文章于 2024-01-31 17:33:35 发布

阅读量252

点赞数 1

分类专栏： H5 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_44205605/article/details/106488867

版权

H5 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个解决iOS设备上H5页面中input标签键盘弹出导致页面布局异常的问题。通过使用jQuery监听input和select元素的blur事件，并在事件触发后调整页面滚动位置，确保了键盘弹出和收回时页面布局的正常显示。

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

移动端H5 input标签在IOS手机下键盘弹出回拉异常处理

  // ios 键盘弹出收回屏幕异样问题
  // 用到了jQuery
;(function() {
  // 判断机型是否为IOS
  var u = navigator.userAgent
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
  // device = isAndroid ? 'android' : 'ios'

  if(!isAndroid){
  // ios 键盘弹出收回屏幕异样问题
  	$('input,select').blur(function() {
    	setTimeout(function() {
      		let scrollHeight =
        	document.documentElement.scrollTop || document.body.scrollTop || 0
      		window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    	}, 100)
  	})
  }
})()