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)
        },
  • 相关阅读:
    JavaScript 核心参考 Arguments 对象
    readonly 和 disable的区别
    Asp.net 页面导航的几种方法与比较(转)
    CSS float clear 使用
    PHP时区列表
    Jquery 父窗口中移进移出鼠标到Iframe: 移进显示更多内容, 移出隐藏部分内容
    Mysql 查看进程SQL
    好用的弹出对话框 artDialog
    In Cache 算法
    live 绑定事件会触发多次
  • 原文地址:https://www.cnblogs.com/LChenglong/p/12672550.html
Copyright © 2011-2022 走看看