Uniapp（H5）判断软键盘是否唤起、关闭事件

记录一下每次因为软键盘弹起，而导致我们写的代码样式变形，或者出现一些其它的BUG性问题，此时都要根据是否软键盘弹出，去做相对应的判断，此篇文章就是判断软键盘是否弹起的一些代码记录，好了接下来进入正题

1.先在data定义我们需要的参数

defaultPhoneHeight:'', //屏幕默认高度
nowPhoneHeight:'', //屏幕现在的高度

2.在生命周期mounted做以下操作

//监听软键盘获取当前屏幕高度的事件
this.defaultPhoneHeight = window.innerHeight
window.onresize = ()=>{
	this.nowPhoneHeight = window.innerHeight
}

补充一点知识：
innerHeight 返回窗口的文档显示区的高度，如果有垂直滚动条，也包括滚动条高度。
innerWidth 返回窗口的文档显示区的宽度，如果有水平滚动条，也包括滚动条高度。
innerWidth 和 innerHeight 是只读属性。
注意：使用 outerWidth 和 outerHeight 属性获取浏览器窗口的宽度与高度。
window.onresize 事件会在窗口或框架被调整大小时发生。

3.此时我们可以用watch监测nowPhoneHeight的变化，从而进行软键盘唤起和关闭的操作

//软键盘弹起事件
nowPhoneHeight(){
	if(this.defaultPhoneHeight != this.nowPhoneHeight){
		//手机键盘被唤起了。
 
        //写软键盘唤起你需要做的操作
        //如this.tabbar = true
	}else{
		//手机键盘被关闭了。
        //写软键盘关闭你需要做的操作
        //如this.tabbar = false
	}
}

4.整体代码

<template>
	<view class="content">
		<!-- 登录按钮 -->
		<view class="login" @click="onLogin" v-show="show">登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultPhoneHeight: '', //屏幕默认高度
				nowPhoneHeight: '', //屏幕现在的高度
				show:true
			}
		},
		mounted() {
			//监听软键盘获取当前屏幕高度的事件
			this.defaultPhoneHeight = window.innerHeight
			window.onresize = () => {
				this.nowPhoneHeight = window.innerHeight
			}
		},
		watch:{
			//软键盘弹起事件
			nowPhoneHeight(){
				if(this.defaultPhoneHeight != this.nowPhoneHeight){
					//手机键盘被唤起了。
			        this.show = false
				}else{
					//手机键盘被关闭了。
			        this.show = true
				}
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.login {
		position: fixed;
		bottom: 100rpx;
		left: 6%;
		width: 88%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #6C8FF8;
		box-shadow: 0px 0px 24rpx 0px rgba(202, 202, 202, 0.41);
		border-radius: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>

5.转载

原文链接：https://blog.csdn.net/weixin_42125732/article/details/120763422