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) },