H5 --(解决)安卓中input输入框获取焦点后,底部固定定位的按钮顶起问题

安卓webview 专栏收录该内容
2 篇文章 0 订阅

问题描述:手机H5页面当input输入框获取焦点时,软键盘会弹起,这时:IOS底部固定定位的按钮不会随着键盘弹起而弹起;而安卓底部固定定位的按钮会跟随软键盘弹起而顶起,往往会遮挡一部分视图,这对用户的体验有点不好,故本篇文章将利用js来解决这个问题,优化用户体验。

1、解决思路
当软键盘弹起时,将底部弹起的按钮隐藏;当软键盘收起时,将按钮正常显示。
2、确定捕获的事件

(1)input输入框的聚焦/失焦事件
分析:当input输入框聚焦,软键盘弹起,将底部弹起的按钮隐藏;当点击视图任意位置,input输入框失焦,软键盘收起,按钮显示是行的通的。不过,存在一个盲区:当点击软键盘的原生收起按钮‘▼’时,焦点仍然在输入框内,失焦事件无法被触发,按钮仍是隐藏状态!
结论:无法满足需求。
(2)window的resize事件
分析:不管是软键盘的弹起和收起事件都会立即触发window的resize事件,满足需求。

3、绑定事件
// 获取视图原始高度
let screenHeight = document.body.offsetHeight	
// 为window绑定resize事件
window.onresize = function () {
      let nowHeight = document.body.offsetHeight
      if (nowHeight < screenHeight) {
        // 将底部弹起的按钮隐藏(可使用给按钮添加相应消失类)
      } else {
        // 将按钮正常显示(可使用给按钮移除相应消失类)
      }
    }

4、使按钮消失的方法(消失类的样式css)
  • display: none; // DOM元素直接不渲染,在文档流不占位置
  • visibility: hidden; // DOM元素仍渲染,在文档流占位置,但不可见,不可触发事件
  • opacity: 0; // DOM元素仍渲染,在文档流占位置,但不可见,可点击,可触发事件
  • transform: tranlateX('500px'); // DOM元素仍渲染,在文档流占位置,只是移出了可见范围
  • 1
    点赞
  • 4
    评论
  • 6
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 4 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

蜗牛羽

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值