h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题

项目中遇到了这个问题,说实话 iOS 端问题挺多的,原因找起来比较简单,就是吊起键盘的时候把window的高度挤小了,然后,

关掉键盘页面高度没恢复,安卓手机会自动恢复页面高度。

原因找到了就想解决办法,刚开始想的是 iOS 它不恢复那我也没办法,这属于 iOS 的bug啊或者微信的 bug 啊,但领导不这么想,

页面显示出问题了当然得解决,就在google里翻,也是找到解决方法了,如下链接

微信6.7.4 ios12软键盘顶起页面后隐藏不回弹解决方案

解决方法很简单,让window滚动下就可以恢复window的高度了。

第一种方法,在输入框失去焦点后(关闭键盘)让页面滚一下(select 标签导致页面底部留白此方法行不通,当用户未改变select 选中

的项就关闭选择框不能触发 change 事件,当用户选中后关闭选择框也不会触发blur事件, 除非点击非select 区域才会blur)

1. 非框架搭建的页面

const windowHeight = window.innerHeight
input.addEventListener(‘blur‘, function () {
    let windowFocusHeight = window.innerHeight
    if (windowHeight == windowFocusHeight) {
      return
    }
    console.log(windowHeight + ‘--‘ + windowFocusHeight);
    console.log(‘修复‘);
    let currentPosition;
    let speed = 1; //页面滚动距离
    currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
    currentPosition -= speed;
    window.scrollTo(0, currentPosition); //页面向上滚动
    currentPosition += speed; //speed变量
    window.scrollTo(0, currentPosition); //页面向下滚动
 })

  

2. 因为经常用 vue 所以就写了全局指令,在输入框上加下就可以了,指令代码如下

const windowHeight = window.innerHeight
Vue.directive(‘fixedInput‘, function (el, binding) {
  el.addEventListener(‘blur‘, function () {
    let windowFocusHeight = window.innerHeight
    if (windowHeight == windowFocusHeight) {
      return
    }
    console.log(windowHeight + ‘--‘ + windowFocusHeight);
    console.log(‘修复‘);
    let currentPosition;
    let speed = 1; //页面滚动距离
    currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
    currentPosition -= speed;
    window.scrollTo(0, currentPosition); //页面向上滚动
    currentPosition += speed; //speed变量
    window.scrollTo(0, currentPosition); //页面向下滚动
  })
})

  

2. 监听window 的 resize 事件,当页面高度发生变化时滚动window,也就不用每个input都做处理了,但是有定时器,但凡有定时器的代码本人一般都不怎么用,

代码如下(按理也可以解决select 导致的底部留白)

const windowHeight = window.innerHeight
var windowScrollTimer = null
window.addEventListener(‘resize‘, function () {
  console.log(windowHeight);
  if (windowScrollTimer) {
    return
  }
  let windowFocusHeight = window.innerHeight
  if (windowHeight == windowFocusHeight) {
    return
  }
  windowScrollTimer = setInterval(() => {
    windowFocusHeight = window.innerHeight
    if (windowHeight == windowFocusHeight) {
      clearInterval(windowScrollTimer)
      windowScrollTimer = null
      return
    }
    console.log(windowHeight + ‘--‘ + windowFocusHeight);
    console.log(‘修复‘);
    fixInputBugs()
  }, 100)
})
function fixInputBugs () {
  let currentPosition;
  let speed = 1; //页面滚动距离
  currentPosition = document.documentElement.scrollTop || document.body.scrollTop;
  currentPosition -= speed;
  window.scrollTo(0, currentPosition); //页面向上滚动
  currentPosition += speed; //speed变量
  window.scrollTo(0, currentPosition); //页面向下滚动
}

  

原文地址:https://www.cnblogs.com/blackbentel/p/10239886.html

时间: 2024-10-06 23:40:23

h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题的相关文章

解决ios下的微信打开的页面背景音乐无法自动播放

后面的项目发现,还有两个坑,需要注意下: ·本文的解决方案的核心是利用了 微信/易信 在ready的时候会有个 WeixinJSBridgeReady/YixinJSBridgeReady事件,通过监听这个事件来触发的.那有个坑就是 如果微信已经ready了,但还没执行到你监听这个ready事件的代码,那么你的监听是没用的,所以最理想的情况是,监听的js放在head前面(放在css外链之前),确保最新执行,切记!切记!. ·另一个坑就是,本文的解决方案只适合一开始就播放的背景音乐.如果你是做那种

cocos2dx 3.3 iOS端播放视频完后黑屏

说实话真的不喜欢写blog,一是文笔差,表达能力不强:二是因为懒;希望能养成写blog的习惯,这样就方便以后查阅,同时也可以帮到遇到同样问题的人. 不废话了,说正事. 3.3在播放视频结束后,切换到游戏场景出现 OpenGL error 0x0506 in -[CCEAGLView swapBuffers] 324 解决方案:在类RootViewController中加入下面两个函数 -(void) viewDidAppear:(BOOL)animated{ cocos2d::Director:

微信支付开发(APP)的各种坑,.net和iOS的各种陷阱,解决.net调用下单接口提示无权限,解决iOS跳转到微信支付页面中间只有一个确定按钮

直入主题之前,请容我吐槽一下微*的官方东西:ASDFQ%#$%$#$%^[email protected]#$%DSFQ#$%.......:吐槽玩了!大家心照就好. 要完成手机APP跳转到微信的APP进行微信支付,需要进行如下操作: 1.先去微信的开放平台(http://open.weixin.qq.com)进行开发者账号的注册. 2.新建一个APP应用,然后填写必填信息提交审核. 3.进入APP应用,在接口信息中,进行申请“获得微信支付能力”的功能,期间会提交相关的公司营业信息证明等. 通过

移动端输入框只有输入文本后才能点击效果

现在手机端的提交按钮很多都是在输入内容后才能提交的,如图: 这是没有输入文本时的效果,当然 下一步 按钮也是不可点击的 这个是是输入文本后的效果,可以进行下一步的操作 这样做对数据提交的正确性有一定的保护,同时也增加了用户体验.其实实现这样的效果逻辑很简单.代码如下: /*如果输入内容就给提交按钮添加样式并且添加跳转链接*/ var btn = $('buttn') function judge(){ var lenght1 = $('#input1').val().length; var le

TeamTalk项目iOS端代码总结

前段时间加入一个团队,对TeamTalk进行二次开发.我负责iOS端的功能扩展.这个项目目前已经少有人维护了,iOS端在我接手后进行了一些底层改动,现在介绍给大家. TeamTalk是一个很有名气的即时通讯解决方案,github地址:https://github.com/meili/TeamTalk但是由于维护一个即时通讯项目工作量太大,内部人员分崩离析,导致项目无人维护了.iOS端最大的过时体现就是google的Protobuf库没有更新,无法使用目前最新的3.6.1版本生成的proto文件.

解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)

前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失.所以只要在输入完毕后模拟一下这个"滚动"的操作,就能解决问题了. 如果是用vue写的: <input type="text" @blur="fixScroll" placeholder="请输入xxx"/> //me

移动端上传照片 预览+draw on Canvas demo(解决iOS等设备照片旋转90度的bug)

背景: 本人的一个移动端H5项目,需求如下: 手机相册选取或拍摄照片后在页面上预览 然后绘制在canvas画布上. 这里,我们先看一个demo(http://jsfiddle.net/q3011893/83qfqpk8/embedded/) 操作步骤: 1.点击选择文件,拍摄一张照片,此时"预览:"文字下会显示你刚才拍摄的照片: 2.再点击"draw on Canvas",该按钮下的画布会绘制你刚才拍摄的照片. 正常的结果: 正文: 让input file支持拍照+

【前端开发】解决ios设备上fixed浮动的input输入框兼容问题

我们在开发移动端页面时,经常会存在这种需求,在页面顶部或底部有一个输入框,一直浮动在顶部或底部位置,中间部分的内容是可以滚动的.比如底部输入框的搜索功能,或底部输入框的写评论功能. 这种问题,我们一般会使用的方法是一个position:fixed;的div,在里面放一个input,浮动在顶部或底部,其他的内容可以滚动. 这种方法在安卓设备中肯定是没问题的.但是在ios设备中就会有问题了. 问题1:滚动页面内容部分时,浮动部分可能会消失,滚动结束后才展示出来 问题2:点击输入框进行输入时,呼出键盘

ios系统 竖屏拍照 canvas处理后 图片旋转(利用exif.js解决ios手机上传竖拍照片旋转90度问题)

转:https://www.cnblogs.com/lovelgx/articles/8656615.html ---恢复内容开始--- 问题:html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 解决方法:利用exif.js解决ios手机上传竖拍照片旋转90度问题 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,详见 htt