处理input输入框被输入法遮住

最新推荐文章于 2021-10-28 08:59:38 发布

弹琴弹琴

最新推荐文章于 2021-10-28 08:59:38 发布

阅读量6.6k

点赞数

分类专栏： HTML5+CSS3点滴知识文章标签： javascript

本文链接：https://blog.csdn.net/bbsyi/article/details/52373593

版权

HTML5+CSS3点滴知识专栏收录该内容

50 篇文章 0 订阅

订阅专栏

本文介绍了一种解决iOS设备上输入框被输入法遮挡问题的方法。通过JavaScript实现了一个名为inputIos的功能，该功能可以调整输入框的位置，确保其始终可见。此方案考虑了不同屏幕尺寸和状态栏高度。

摘要由CSDN通过智能技术生成

//处理input输入框被输入法遮住
function inputIos(inputBox){
    var inputF = $(inputBox).find('input');//找到对应的input
    if(inputF == document.activeElement){
        //获取焦点时用喔
        setTimeout(function(){
            var inputIsNotInView = notInView(),
                Width = window.innerWidth,
                Height = window.innerHeight;
            if(inputIsNotInView){
                if(Width != 750){
                    var bottomAdjust = (Height - window.innerHeight - 88) + 'px';
                    $(inputBox).css('bottom',bottomAdjust);
                }else {
                    var bottomAdjust = (Height - window.innerHeight - 88 - 432) + 'px';
                    $(inputBox).css('bottom',bottomAdjust);
                }
            }
        },600);

    }else {
        //失去焦点时用喔
        var inputIsNotInView=notInView();
        if(inputIsNotInView){
            $(inputBox).css({'opacity':0,bottom:0});
            setTimeout(function(){
                $(inputBox).css('opacity',1);
            },600)
        }
    }


    //------------------------------
    function notInView(){
        var bottom = inputBox.getBoundingClientRect().bottom;
        if (window.innerHeight - bottom < 0){
            return true;
        }else {
            return false;
        }
    };
}