javascript - 安卓手机输入框被软键盘遮住的问题
怪我咯
怪我咯 2017-04-11 12:27:17
[JavaScript讨论组]

安卓手机输入框被软键盘遮住的问题,如何在点击输入框的时候类似与IOS那种,输入框直接在软件盘的上面,而不会被遮住,js或者css有什么实现的方式

怪我咯
怪我咯

走同样的路,发现不同的人生

全部回复(2)
巴扎黑

我这边也遇到过很多这种键盘遮住输入框的问题,监听resize并且触发scroll是可以解决一部分问题,但是后来发现很多是和输入法,浏览器,webView有关,比如有的输入法弹出的时候不会自动滚动,但是输入第一个字符的时候就会滚动到对应的位置,有的浏览器在键盘弹出的时候不会触发resize所以这种方法直接失效了,挺闹心的。

现在我更多会在对需求的时候让交互和设计尽量避免这种输入框在下方的设计,当然一些不可避免的情况没办法了

阿神

在代码中加入如下代码:

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号