扫码关注官方订阅号
学习是最好的投资！
应该算是移动端比较经典的兼容性bug了，如果没猜错的话，你的输入框应该是使用的fixed定位。出现原因：软键盘唤起后，页面的fixed元素将失效（即无法浮动，也可以理解为变成了absolute定位），所以当页面超过一屏且滚动时，失效的fixed元素就会跟随滚动了。这便是iOS上fixed元素和输入框的bug。其中不仅限于type=text的输入框，凡是软键盘（比如时间日期选择、select选择等等）被唤起，都会遇到同样地问题。解决思路&方案：1.既然在iOS下由于软键盘唤出后，页面fixed元素会失效，导致跟随页面一起滚动，那么假如——页面不会过长出现滚动，那么即便fixed元素失效，也无法跟随页面滚动，也就不会出现上面的问题了。2.不嫌重的话可以使用iScroll.js这儿有一篇比较详细的解决方案Web移动端Fixed布局的解决方案
fixed
absolute
type=text
我之前也遇到过，我觉得可以写个js这样处理，当你的input是焦点事件的时候，改变footer的fixed为absolute；失去焦点是变回fixed。你可以去试试
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
0 
2
486
收藏
应该算是移动端比较经典的兼容性bug了，如果没猜错的话，你的输入框应该是使用的
fixed定位。出现原因：
软键盘唤起后，页面的
fixed元素将失效（即无法浮动，也可以理解为变成了absolute定位），所以当页面超过一屏且滚动时，失效的fixed元素就会跟随滚动了。这便是iOS上fixed元素和输入框的bug。其中不仅限于type=text的输入框，凡是软键盘（比如时间日期选择、select选择等等）被唤起，都会遇到同样地问题。解决思路&方案：
1.既然在iOS下由于软键盘唤出后，页面fixed元素会失效，导致跟随页面一起滚动，那么假如——页面不会过长出现滚动，那么即便
fixed元素失效，也无法跟随页面滚动，也就不会出现上面的问题了。2.不嫌重的话可以使用iScroll.js
这儿有一篇比较详细的解决方案Web移动端Fixed布局的解决方案
我之前也遇到过，我觉得可以写个js这样处理，当你的input是焦点事件的时候，改变footer的fixed为absolute；失去焦点是变回fixed。你可以去试试