安卓H5软键盘遮挡输入框

Posted 2021-01-02 me春天

<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进行元素位置处理