h5-ios和Android手机输入键盘总结-android软键盘弹出

原因:

ios当输入框聚焦弹出键盘的时候,页面高度没有变化,是分层的,软键盘是盖在网页上的

Android的软键盘弹出的时候,软键盘是占据页面的高度的,这时候你的页面高度发生变化,页面上滑让给软键盘,你fixed底部的东西都会弹上去,页面高度为 页面+软键盘

解决办法:

iOS:这时候页面会出现滑动,想让页面不滑动,需要设置页面滑动到顶端

  scrollTop(){
    // ios页面滚动到最顶层
    window.scrollTo(0,0);
    document.body.scrollTop=0;
    document.documentElement.scrollTop=0;
  }

这个对Android没用,页面高度就发生了变化,你去判断页面高度的变化就可以了

  // 监听安卓手机键盘的收缩,弹出
  pageResize(){
      let winH=document.documentElement.clientHeight;
      window.onresize = () => {
          let curH=document.documentElement.clientHeight;
          if (winH-curH>200) {//弹出
            //隐藏底部按钮           
          } else {
            //显示底部按钮
          }
      }
  }

隐藏方式:

display: none; // DOM元素直接不渲染,在文档流不占位置
visibility: hidden; // DOM元素仍渲染,在文档流占位置,但不可见,不可触发事件
opacity: 0; // DOM元素仍渲染,在文档流占位置,但不可见,可点击,可触发事件
transform: tranlateX(‘500px’); // DOM元素仍渲染,在文档流占位置,只是移出了可见范围

参考文章:

  1. H5 –(解决)安卓中input输入框获取焦点后,底部固定定位的按钮顶起问题
  2. H5防止安卓手机软键盘弹出挤压页面导致变形的方法
  3. 移动端软键盘监听(弹出,收起),及影响定位布局的问题

h5-ios和Android手机输入键盘总结-android软键盘弹出》有1个想法

发表评论

邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据