input输入框，在手机上，软键盘会将固定定位和绝对定位的按钮顶起，解决办法

2021-08-27 09:15:20

原理：通过监听window窗口的高度变化，来控制显示和隐藏按钮

注意：如果是点击键盘上的收起，可以监听到，但是如果是因为input失去焦点，则不会监听到窗口变化，所以我们需要同时判断input失去焦点

html

        <input
              type="text"
              class="input"
              @blur="focusBlur(‘blur‘)"
              @focus="focusBlur(‘focus‘)"
              v-model="item.eleValue"
              :placeholder="‘请输入‘+item.eleName"
            />

<button class="fixed_btn" @click="submit()" v-show="keyboardHide ||!inputFocus">确认报名</button>

//navigator.userAgent.indexOf用来判断浏览器类型
    var isAndroid = navigator.userAgent.indexOf(‘Android‘) > -1 || navigator.userAgent.indexOf(‘Adr‘) > -1;
    if (isAndroid){//如果是安卓手机的浏览器
        let clientHeight = document.body.clientHeight;
        window.addEventListener(‘resize‘, function () {   
            // Document 对象的activeElement 属性返回文档中当前获得焦点的元素。
            if (document.activeElement.tagName === ‘INPUT‘ || document.activeElement.tagName === ‘TEXTAREA‘) {
              let clientHeight2 = document.body.clientHeight;
              if(clientHeight>clientHeight2){
                _this.keyboardHide = false;
              }else{
                _this.keyboardHide = true;
              }
            }
        });
    }

// input失去获取焦点  设置个延迟时间，防止按钮闪烁
    focusBlur(type){
      let _this = this;
      setTimeout(function(){
        if(type == ‘focus‘){
          _this.inputFocus=true
        }else if(type == ‘blur‘){
          _this.inputFocus=false
        }
      },150)
    },

input输入框，在手机上，软键盘会将固定定位和绝对定位的按钮顶起，解决办法

码农公寓

相关文章