项目中使用了input，底部footer有一行文字，使用的是position: absolute;绝对定位，把文字固定在底部。当ios端输入的时候是没有任何问题的，但是安卓手机上，键盘弹出来的同时，footer的文字会随着键盘上移遮挡住输入框。
解决方式：
-
使用@blur和@focus监听Input的焦点，从而用v-show控制footer的显示和隐藏。但是发现当手动移下去键盘，但input并没有失焦的时候，footer还是隐藏的，所以还需要监听键盘的弹出和关闭，请参考这篇博客，感谢作者提供的方法：https://www.bbsmax.com/A/6pdDxW7Ldw/
不过如果将网页集成到app里面，这种方式可能会存在适配问题。 -
第二种是项目里面使用了px2rem-loader自动适配，这时候只需要在input和footer中间加一个div元素，去掉absolute，就可以解决问题。
<input :placeholder="placeH" :maxlength="maxLength" />
<div style="width:100%;height:200px"></div>
<div class="home-footer">
<p>本产品由XXXXXX提供服务</p>
</div>
网友评论