安卓H5软键盘遮挡输入框

Posted me春天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了安卓H5软键盘遮挡输入框相关的知识,希望对你有一定的参考价值。

<div class="label">
                    *
                    <span><?php echo lang(‘receive_email_info‘); ?></span>
                    <input class="r-email" type="text" placeholder="<?php echo lang(‘please_in_receive_email‘); ?>3333">
                </div>
                <div class="label">
                    *
                    <span><?php echo lang(‘alipay_binding_vcode‘); ?></span>
                    <input class="r-code" type="text" placeholder="<?php echo lang(‘please_input_code‘); ?>">
                    <input type=‘button‘ class="get-code2" value=‘<?php echo lang(‘get_captcha‘); ?>‘>
                </div>
var isredundant = false;
        $(‘.r-email,.r-code‘).on(‘blur‘, function(){
                setTimeout(function(){
                    if (isredundant) { 
                        isredundant = false;
                    }else{
                        $(‘.redundant_div‘).css(‘display‘) = ‘none‘
                    }
                }, 100)
        })
        $(‘input[type="text"],textarea‘).on(‘focus‘, function () {
            if ($(this).attr(‘class‘) == ‘r-email‘ || $(this).attr(‘class‘) == ‘r-code‘) {
                if ($(‘.redundant_div‘).length > 0) {
                    alert($(‘.redundant_div‘).css(‘display‘) == ‘none‘)
                    if (!$(‘.redundant_div‘).css(‘display‘) == ‘none‘) {
                        alert(12314)
                        isredundant = true;
                    }
                    setTimeout(function(){
                        $(‘.redundant_div‘).css(‘display‘) = ‘block‘
                    },150)
                }else{
                    $(‘.personal-data‘).append(‘<div class="redundant_div" style="width: 100%;height: 200px;background:blue;"></div>‘)
                    setTimeout(function(){
                        $(‘.redundant_div‘).css(‘display‘) = ‘block‘
                    },150)
                }
            }
            setTimeout(function(){
                    // if (target.scrollIntoViewIfNeeded) {
                    //     target.scrollIntoViewIfNeeded();
                    // }
                    
                    if(‘scrollIntoView‘ in document.activeElement) {
                        document.activeElement.scrollIntoView();
                    } else {
                        document.activeElement.scrollIntoViewIfNeeded();
                    }
            },400);
        });

因为一些安卓中的H5软键盘会遮挡输入框

1.

scrollIntoView可以让被遮挡的元素展示在可视区域
2.如果input是在页面最下方,并且下方没多余空位可以滚动时,手动插入空白元素站位再使用
scrollIntoView进行元素位置处理

以上是关于安卓H5软键盘遮挡输入框的主要内容,如果未能解决你的问题,请参考以下文章

h5开发安卓软键盘遮挡解决方案

Android WebView加载页面的输入框被软键盘遮挡的问题

移动端软件盘遮挡输入框问题

Vue h5项目解决键盘遮挡输入框问题

安卓弹出软键盘怎么把一部分布局顶上去

H5页面软键盘常见问题