Uniapp(H5)判断软键盘是否唤起关闭事件

Posted 是小橙鸭丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
	

 今日分享就到这啦,有问题的欢迎随时交流

以上是关于Uniapp(H5)判断软键盘是否唤起关闭事件的主要内容,如果未能解决你的问题,请参考以下文章

H5页面软键盘常见问题

H5如何对android和ios手机软键盘的监听

微信浏览器H5页面,当软键盘/下拉选框关闭导致页面底下空缺的问题处理

uniapp集成支付宝支付无法唤起支付宝客户端

H5软键盘弹起收回(IOS与Android)

uniapp支付宝支付的前端开发经验分享