解决安卓手机H5页面input获得焦点时键盘遮住输入框

最新推荐文章于 2022-09-08 16:46:57 发布

置顶幺叭伍

最新推荐文章于 2022-09-08 16:46:57 发布

阅读量4.3k

点赞数 2

文章标签： android javascript

本文链接：https://blog.csdn.net/weixin_50422141/article/details/121694596

版权

ios在移动端点击input弹出键盘时内容会自动上移展示出文本框；
安卓在点击input弹出键盘时键盘会遮住文本框；
解决办法如下：

    window.onload = function () {
            let u = navigator.userAgent;
            if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //判断安卓手机
                //  拿到获取焦点的input
                let input = document.getElementById('myInput')
                input.addEventListener('focus', function () {
                    setInterval(function () {
                        input.scrollIntoView(true);
                    }, 100)
                })
            }
        }

效果图：
在这里插入图片描述

element.scrollIntoView（alignToTop）; //布尔参数
element.scrollIntoView（scrollIntoViewOptions）; //对象参数

alignToTop	[可选]，目前之前这个参数得到了良好的支持
true	元素的顶部将对齐到可滚动祖先的可见区域的顶部。对应于scrollIntoViewOptions: {block: “start”, inline: “nearest”}。这是默认值
false	元素的底部将与可滚动祖先的可见区域的底部对齐。对应于scrollIntoViewOptions: {block: “end”, inline: “nearest”}。