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)
        },
  • 相关阅读:
    AI编辑SVG格式的相关问题
    HTML里的id等属性命名需要注意
    canvas绘图动画细节
    触控获取坐标判断滑动方向
    CSS3卡片旋转效果
    使用CURL下载远程文件保存到服务器
    微信JS-SDK应用DEMO
    布局转换:文档流->绝对定位
    ThinkPHP缓存微信公众号access_token
    JAVA JSP笔记
  • 原文地址:https://www.cnblogs.com/LChenglong/p/12672550.html
Copyright © 2011-2022 走看看