安卓H5軟鍵盤遮擋輸入框

標籤：redundant   red   please   data   else   binding   timeout   lease   處理   

<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軟鍵盤遮擋輸入框