WEBAPP兼容

目录

• scrollTop兼容写法
• 移动端键盘唤起底部footer上移
• 全屏切换下一步表单禁用tab
• clientHeight

clientHeight

oScroll: {
  v: document.documentElement.clientHeight || document.body.clientHeight || document.body.offsetHeight || window.innerHeight,
},

scrollTop

const y = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
注意: overflow:auto
[学习来源_原生js获取scrollTop](https://www.cnblogs.com/vali/p/8986535.html)

移动端键盘唤起底部footer上移

项目写法 footer + scrollIntoView

<input type="text" placeholder='XXX'
                  v-model="form.XXX"
                  ref="input" @blur="CPTBlur('input')">
<textarea @input="textareaEnter($event)" v-model="form.XXX" :placeholder="form.XXXX"
                  ref="textarea" @blur="CPTBlur('textarea')"></textarea>
              </div>
<div class="footer" :style="{marginTop:CPTHeight._stepWrap2+'px'}">

CPTHeight: {_viewH:1334,_conH: 1334-120, _footH: 120, _stepWrap0: 0, _stepWrap1: 0, _stepWrap2: 0,}
// 兼容input键盘唤起
CPTBlur(name) {
	this.$refs[name].scrollIntoView(false);
},
// css 计算
_computeStyle(){
	const v1 = document.documentElement.clientHeight || document.body.clientHeight,
	  v2 = document.getElementById(`_operWrap`).offsetHeight
	this.CPTHeight._viewH = this.CPTHeight._stepWrap0 = this.CPTHeight._stepWrap1 = this.CPTHeight._stepWrap2 = v1
	this.CPTHeight._conH = v1 - v2
	this._setStepWrapHeight(this.currStep)
},
_setStepWrapHeight(i){
	const h = document.getElementById(`_stepWrap${i}`).offsetHeight
	this.CPTHeight[`_stepWrap${i}`] = this.CPTHeight._conH - h
},

.container{overflow:hidden;}

.swiperWrap{
	.swiperItem{
	  display:none;
	  &.in{display:block;}
	}
}

[学习来源_微信H5输入法弹起导致页面上移](https://www.jianshu.com/p/c0193289c512)

监听键盘唤起 显示隐藏footer

!!! but 微信自带浏览器不兼容：
    手机iphoneXMax
    - input blur之后页面上移
    - position定位后footer点击延迟 || 点击错位 || 无法点击 必须将页面移动之后恢复正常

data() {
    return {
		isShowFooter: true, //显示或者隐藏footer 兼容键盘唤起,
		htmlH: document.documentElement.clientHeight ||document.body.clientHeight,
		viewH: document.documentElement.clientHeight ||document.body.clientHeight
	}
}


mounted(){
	//监听事件
	window.onresize = () => {
	    return (() => {
	      	this.viewH = document.documentElement.clientHeight || document.body.clientHeight
	    })()
	}
}


watch: {
    //监听显示高度
    viewH: function () {
        this.isShowFooter = this.htmlH > this.viewH ? false : true
    }
},


HTML:
	v-show: isShowFooter

[学习来源_可能这些是你想要的H5软键盘兼容方案](https://segmentfault.com/a/1190000018959389)

兼容收集 0

'blur'
function(){
    setTimeout(function(){
        window.scrollTo(0, 0)
    },100)
})

input属性adjust-position为false页面不往上顶input位置跟着键盘的高度往上移bindfocus可获得键盘高度
<input adjust-position='false'></input>

兼容收集 0000M

btn margin = 100% height - content
static 静态页面页面

全屏切换下一步表单禁用tab

window.addEventListener('keydown', (evt) => {
    if (evt.keyCode == 9) {
      evt.preventDefault && evt.preventDefault()
      evt.returnValue = false
      return false
    }
})
//监听事件
window.onresize = () => {
    return (() => {
      this.viewH = document.documentElement.clientHeight || document.body.clientHeight
    })()
}

[学习来源_vue.js禁用浏览器默认事件](https://blog.csdn.net/princek123/article/details/84571479)