码迷,mamicode.com
首页 > 移动开发 > 详细

安卓H5软键盘遮挡输入框

时间:2018-08-11 01:20:19      阅读:404      评论:0      收藏:0      [点我收藏+]

标签: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软键盘遮挡输入框

标签:redundant   red   please   data   else   binding   timeout   lease   处理   

原文地址:https://www.cnblogs.com/lichuntian/p/9457736.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!