解决移动端h5-input输入光标一直在最前面的bug(min-height)

当在平板的移动端应用中,弹出软键盘会压缩可视屏幕高度,特别是对于有固定顶部和底部,中间使用calc计算高度的滚动区域设计。这会导致输入框(input)被隐藏,输入时出现文字倒置现象。为解决这个问题,可以设置中间区域的最小高度(min-height),确保软键盘弹出时输入框仍然可见。
摘要由CSDN通过智能技术生成

        在平板的移动端,弹起软键盘时会挤压可视屏幕的高度(网上说ios不会挤压,没试过),如果你的布局刚好顶部和底部是固定高度,中间是有用calc计算高度的滚动区域,input框就在滚动区域中(见图1),如果此时弹起软键盘,中间的可视高度会变为0,input会看不到(见图2),导致输入数字时一光标一直在input的前面,输入“123”就会显示“321”(输入中文不会倒过来)。

图1

 图2

 解决办法就是给中间的区域设置最小高度(min-height),使软键盘弹起时,确保能看到input框。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值