700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 移动端键盘弹起导致底部按钮上浮解决方案

移动端键盘弹起导致底部按钮上浮解决方案

时间:2022-01-20 15:42:13

相关推荐

移动端键盘弹起导致底部按钮上浮解决方案

问题描述:移动端页面输入框聚焦伴随着键盘弹起,底部icon浮到键盘上方,导致样式不友好

解决思路:在键盘弹起时,不让原本固定在底部的icon自动浮起。监听屏幕的实时高度,控制底部按钮的显示与否,从而达到按钮固定在底部的效果。

解决方案(本例是在vue框架下实现的解决方案代码):

html:

data部分:

监听屏幕实时高度:

mounted周期:

结果:

Android手机键盘弹起时实时屏幕高度会改变,但是苹果手机无论是默认输入法还是安装的其他输入法,键盘弹出的高度不会改变,但是庆幸的是大部分ios已经支持了fixed属性

还发现一个小的bug就是苹果手机点击输入框时偶尔会闪现一个icon,通过给父元素加入position:relative和足够的padding-bottom解决了,之后我发现可以用position:absolute定位父元素给position:relative和足够的padding-bottom能达到同样的效果^_^

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。