兼容ios和android的带有输入框的底部悬浮按钮

需求:

页面底部有个fixed的button,和一个处于正常文档流中的输入框,当尝试往输入框输入内容时,会唤起手机键盘。需求是唤起键盘的时候,fixed的按钮不希望被键盘顶上去,即不希望按钮在键盘上部,而是希望按钮仍旧在底部,被键盘盖住。

现象:

ios:按钮有时候会被键盘顶上去,有时候不会。

安卓:一定会被键盘顶上去

解决方法:

android:产生此现象的原因是:页面的窗口发生了变化,即窗口变为除了键盘的部分,由于fixed定位相对于窗口最底部,所以会,出现了此现象。解决方法是:监听窗口的resize事件。当窗口高度变小时,将button的fixed定位变为static定位。当窗口恢复时,将button的static定位变为fixed定位。有一点需要注意的是,Android里的输入框在键盘收起时不会触发blur事件,所以,想要通过focus、blur事件是无法解决问题的。

ios:产生原因不详,解决方法:监听输入框的focus和blur事件,当focus时,键盘出现,将button的fixed定位变为static定位,当blur时,键盘收起,将button的static定位变为fixed定位。有一点需要注意的是,ios里的窗口在键盘弹出或者收起不会触发resize事件。

你可能感兴趣的:(JavaScript应用)