input页面居中,软键盘覆盖input

本文探讨了iOS设备上软键盘遮挡Input输入框的问题,并提供了几种可能的解决方案。包括通过调整布局和使用scroll.js插件实现滚动,特别讨论了input居中+mui区域滚动时遇到的难题及尝试解决的过程。

input框位于底部

     对于ios的软键盘遮盖input输入框问题,网上已经有了一些解决办法,无非就是改变布局,再加scroll.js插件实现滚动,

input框位于顶部

    这种情况不会出现问题,

input居中+mui区域滚动,

    此为巨坑,坑了我足足一天的时间,

    <div class="mui-scroll-wrappe"> <input /> </div>

    input居中且放于区域滚动中,获取焦点,软键盘遮盖iput,input输入值才把页面滚动上去,

           测试1,获取焦点后设置定时器,自动填充值模拟软键盘输入值,结果(失败);

           测试2,要让input正好位于软键盘上方,无空隙,经试验是由bottom决定的,input又要居中,故只能设置position:absolute;bottom 0%;margin-bottom 50%(依照input高决定);

margin-bottom的单位1是页面高度,,故得到的位置也不会绝对的居中。。然本人无法发现更好的办法,望大牛指教一二。

转载于:https://www.cnblogs.com/liwangxiang/p/6266474.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值