资讯专栏INFORMATION COLUMN

移动端软键盘弹出影响页面布局问题

G9YH / 1051人阅读

摘要:移动端中软键盘弹出影响页面布局在一个移动端的页面上的中输入时,弹出的软键盘会占据的位置。安卓端软键盘问题页面底部有绝对定位的元素。

移动端中软键盘弹出影响页面布局

在一个移动端的页面上的input中输入时,弹出的软键盘会占据window的位置。
如果当前页面的中有绝对定位的元素,例如在页面底部有一个position:fixed;bottom:0;的按钮,当软键盘弹起时,window的高度是窗体的顶部到软键盘之上,底部绝对定位的元素就会覆盖在输入框之上,影响输入。
这个问题一般出现在Android系统中。



    
    
    
    安卓端软键盘问题
    
    


页面底部有绝对定位的元素。

目前我是实践中解决这个问题是方法是:监控窗体的大小变化resize事件,窗体大小变化超过一定的阈值时,判断为软键盘弹出,弹出后将body元素的高度设置为软键盘弹出前的高度,软键盘关闭后将body元素的高度设置为100%

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92509.html

相关文章

  • 移动端软键盘弹出影响页面布局问题

    摘要:移动端中软键盘弹出影响页面布局在一个移动端的页面上的中输入时,弹出的软键盘会占据的位置。安卓端软键盘问题页面底部有绝对定位的元素。 移动端中软键盘弹出影响页面布局 在一个移动端的页面上的input中输入时,弹出的软键盘会占据window的位置。如果当前页面的中有绝对定位的元素,例如在页面底部有一个position:fixed;bottom:0;的按钮,当软键盘弹起时,window的高度...

    jackwang 评论0 收藏0
  • 移动端软键盘弹出影响页面布局问题

    摘要:移动端中软键盘弹出影响页面布局在一个移动端的页面上的中输入时,弹出的软键盘会占据的位置。安卓端软键盘问题页面底部有绝对定位的元素。 移动端中软键盘弹出影响页面布局 在一个移动端的页面上的input中输入时,弹出的软键盘会占据window的位置。如果当前页面的中有绝对定位的元素,例如在页面底部有一个position:fixed;bottom:0;的按钮,当软键盘弹起时,window的高度...

    linkin 评论0 收藏0
  • 移动端软键盘弹出时文本输入框下沉、获取焦点并弹出键盘

    摘要:文本输入框容易下沉因为软键盘弹出时是一个动画方法利用滚动条,弹出软键盘的时候让滚动条滚动到最底部。效果点击按钮弹出输入框获取焦点并弹出软键盘类似微信朋友圈空间。 ## 文本输入框容易下沉因为软键盘弹出时是一个动画 ## //方法:利用滚动条,弹出软键盘的时候让滚动条滚动到最底部。并设置一个定时器每过0.5秒设置一次, //这个是因为软键盘还没有完全弹出滚动条已经到此时的底部了,等软键盘...

    keelii 评论0 收藏0
  • 移动端软键盘弹出时文本输入框下沉、获取焦点并弹出键盘

    摘要:文本输入框容易下沉因为软键盘弹出时是一个动画方法利用滚动条,弹出软键盘的时候让滚动条滚动到最底部。效果点击按钮弹出输入框获取焦点并弹出软键盘类似微信朋友圈空间。 ## 文本输入框容易下沉因为软键盘弹出时是一个动画 ## //方法:利用滚动条,弹出软键盘的时候让滚动条滚动到最底部。并设置一个定时器每过0.5秒设置一次, //这个是因为软键盘还没有完全弹出滚动条已经到此时的底部了,等软键盘...

    Doyle 评论0 收藏0
  • 移动端软键盘弹出时文本输入框下沉、获取焦点并弹出键盘

    摘要:文本输入框容易下沉因为软键盘弹出时是一个动画方法利用滚动条,弹出软键盘的时候让滚动条滚动到最底部。效果点击按钮弹出输入框获取焦点并弹出软键盘类似微信朋友圈空间。 ## 文本输入框容易下沉因为软键盘弹出时是一个动画 ## //方法:利用滚动条,弹出软键盘的时候让滚动条滚动到最底部。并设置一个定时器每过0.5秒设置一次, //这个是因为软键盘还没有完全弹出滚动条已经到此时的底部了,等软键盘...

    phodal 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<