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

最新推荐文章于 2022-12-05 17:52:30 发布

原创最新推荐文章于 2022-12-05 17:52:30 发布 · 6.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

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

50 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//处理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;
        }
    };
}