zoukankan      html  css  js  c++  java
  • input输入框,在手机上,软键盘会将固定定位和绝对定位的按钮顶起,解决办法

    原理:通过监听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>

    js

    //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)
        },
  • 相关阅读:
    leetcode -- Count and Say
    leetcode -- Sudoku Solver
    leetcode -- Valid Sudoku
    leetcode -- Search Insert Position
    leetcode -- Search for a Range (TODO)
    leetcode -- Search in Rotated Sorted Array II
    leetcode -- Search in Rotated Sorted Array
    SDL多线程显示更新窗口
    SDL初始化和创建窗口
    中国天气网API接口
  • 原文地址:https://www.cnblogs.com/LChenglong/p/12672550.html
Copyright © 2011-2022 走看看