H5开发

1、H5解决软键盘遮挡输入框的问题(vivo)

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。 Element.scrollIntoViewIfNeeded()方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。

<input id="addressInput" placeholder="请输入地址" type="text" v-model.trim="address" @focus="inputFocus('addressInput')"/>

methods: {
   inputFocus(code){
    //使用定时器让输入框上滑时更加自然
    let element = document.getElementById(code);
    setTimeout(function(){
      element.scrollIntoView();
      element.scrollIntoViewIfNeeded()
    },200);
  },

  //ios不存在此问题，因此只处理安卓机型
  inputFocus(code){
    var u = navigator.userAgent;
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if(!isiOS){
      // 使用定时器让输入框上滑时更加自然
      let element = document.getElementById(code);
      setTimeout(function(){
        element.scrollIntoView();
        element.scrollIntoViewIfNeeded()
      },200);
    }
  },
},

2、H5解决点击输入框，弹出键盘，底部被顶起问题

原因: footer模块使用了position:fixed导致

<div class="footer" v-if="isShow">
  <mt-button class="footer-left-btn">取消</mt-button>
  <mt-button type="primary" class="footer-right-btn">提交</mt-button>
</div>

data(){
	return{
      isShow: true,  // 底部菜单 v-show 状态值
      screenHeight: window.innerHeight, // 这里是给到了一个默认值
      originHeight: window.innerHeight, // 默认高度在watch里拿来做比较
    }
}
watch:{
  screenHeight: function (newValue) {
    if (this.originHeight > newValue) {
      //软键盘展开，隐藏底部footer
      this.isShow = false;
    } else {
      //软键盘收起，展示底部footer
      this.isShow = true;
      let inputEle = document.getElementsByTagName('input');
      let textareaEle = document.getElementsByTagName('textarea');
      let ele = [...inputEle, ...textareaEle];
      ele.forEach(itemTag => {
       itemTag.blur();
       //当软键盘收起时使输入框失去焦点
      })
    }
  },
},