移动端输入框固定在底部键盘抬起时遮挡住输入框

Posted 2022-08-31 lishuang2243

移动端开发时输入框使用fixed固定在底部时，抬起键盘会遮挡住输入框

监听输入框获得焦点

$(function()

    $("#pinglun").focus(function()           //输入框获得焦点

        var tHeight = $(document).height();     //获取当前屏幕高度，没用到

        console.log(‘当前屏幕高度=‘+tHeight)

        console.log(‘输入框获得焦点‘)

        document.getElementById("dibu1").style.position = "relative"         //获取焦点时更改定位，这个id是你定位输入框处的id

        // document.getElementById("dibu1").style.marginBottom = "cheight"+‘px‘

        setTimeout(function()

            document.getElementById("dibu1").scrollIntoView(true)             //延时定位元素移动，键盘抬起需要时间

        ,200)

    ).blur(function()

        console.log(‘输入框失去焦点‘)

        document.getElementById("dibu1").style.position = "fixed"     //失去焦点后改回定位状态

    );

);