为了账号安全,请及时绑定邮箱和手机立即绑定

手机浏览器虚拟键盘把底部按钮顶上去

手机浏览器虚拟键盘把底部按钮顶上去

KJinn 2017-06-20 11:13:29
#send{ width:40%; height:44px; line-height:42px; color:#000533; background:#fff; border:1px solid #000533; position:absolute; bottom:6%; left:30%;}<button id="send">提交</button>部分安卓机型在点击输入框弹出虚拟键盘的时候会把send顶到页面中间导致布局乱了,求不要顶上去的解决方法。
查看完整描述

27 回答

?
KJinn

TA贡献20条经验 获得超12个赞

已经完美解决了。附上代码供后来者参考

window.onload = function(){

var h = $('body').height();

$('body').css('min-height',h);

}


查看完整回答
2 反对 回复 2017-06-20
  • 慕粉3782079
    慕粉3782079
    底部的固定定位是不是也可以这样?你这是设置最小高度啊
  • 後埔仔
    後埔仔
    他这是在页面加载时获取当前屏幕body的具体高度(屏幕不同造成可能的高度不同,所以要加载时获取才准确到每个用户),然后把body的最小高度强制设置为当前屏幕高度。意思是最小高度为整个屏幕,所以不管换哪个屏幕打开,都不会再被顶上去了。
  • 後埔仔
    後埔仔
    这其实是变相给body设置了固定高度。如果页面只需要整个屏幕高度就足够,那倒也还好。如果是内容很长的页面,这样就会出现内容显示不全的尴尬了。所以,这里还需要在input失焦时(一般失焦时键盘就会自动收起)再触发一个事件,让body去掉固定高度,恢复原先100%高度。
点击展开后面1
?
李晓健

TA贡献1036条经验 获得超461个赞

键盘出来的时候  肯定就是input 光标进入的事件,在这个事件里把 button 隐藏,input失去光标时,就是键盘收起来的时候,再把 button  显示出来 

查看完整回答
反对 回复 2017-06-20
  • KJinn
    KJinn
    可是用户输入完了以后把键盘收回去,此时input还在focus状态,提交按钮还没有显示。 除非再点一下屏幕才能blur
?
hongsehun

TA贡献2条经验 获得超0个赞

不用绝对定位就能解决这个问题

查看完整回答
反对 回复 2017-08-22
  • 27 回答
  • 5 关注
  • 22483 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信