安卓H5软键盘遮挡输入框

天下之事常成于困约,而败于奢靡。这篇文章主要讲述安卓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=https://www.songbingjia.com/android/‘< ?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软键盘遮挡输入框】因为一些安卓中的H5软键盘会遮挡输入框
1.
scrollIntoView可以让被遮挡的元素展示在可视区域
2.如果input是在页面最下方,并且下方没多余空位可以滚动时,手动插入空白元素站位再使用

scrollIntoView进行元素位置处理



    推荐阅读