扫码关注官方订阅号
安卓手机输入框被软键盘遮住的问题,如何在点击输入框的时候类似与IOS那种,输入框直接在软件盘的上面,而不会被遮住,js或者css有什么实现的方式
走同样的路,发现不同的人生
我这边也遇到过很多这种键盘遮住输入框的问题,监听resize并且触发scroll是可以解决一部分问题,但是后来发现很多是和输入法,浏览器,webView有关,比如有的输入法弹出的时候不会自动滚动,但是输入第一个字符的时候就会滚动到对应的位置,有的浏览器在键盘弹出的时候不会触发resize所以这种方法直接失效了,挺闹心的。
resize
scroll
现在我更多会在对需求的时候让交互和设计尽量避免这种输入框在下方的设计,当然一些不可避免的情况没办法了
在代码中加入如下代码:
if(/Android [4-6]/.test(navigator.appVersion)) { window.addEventListener("resize", function() { if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") { window.setTimeout(function() { document.activeElement.scrollIntoViewIfNeeded(); },0); } }) }
代码参考来源:stackoverflow-Android does not correctly scroll on input focus if not body element
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
我这边也遇到过很多这种键盘遮住输入框的问题,监听
resize并且触发scroll是可以解决一部分问题,但是后来发现很多是和输入法,浏览器,webView有关,比如有的输入法弹出的时候不会自动滚动,但是输入第一个字符的时候就会滚动到对应的位置,有的浏览器在键盘弹出的时候不会触发resize所以这种方法直接失效了,挺闹心的。现在我更多会在对需求的时候让交互和设计尽量避免这种输入框在下方的设计,当然一些不可避免的情况没办法了
在代码中加入如下代码:
代码参考来源:stackoverflow-Android does not correctly scroll on input focus if not body element