防止键盘向上推底部导航栏

Question

These images resume perfectly the problem I have and the found solution.

Actual behavior Expected behavior

I thought that using the focus and blur events might be a solution, but it turns out that when I click on the OS back button, as I mentioned in the image, the input stays in the focus state, so what could be the solution?

Edited

 const textfield = document.getElementById("textfield"), bottomNav = document.getElementsByClassName("bottom-nav")[0], viewportHeight = window.innerHeight; textfield.addEventListener("focus", () => { bottomNav.style.top = `${viewportHeight - 56}px`; bottomNav.style.bottom = "auto"; }); textfield.addEventListener("blur", () => { bottomNav.style.top = "auto"; bottomNav.style.bottom = 0; });

 *, *::before, *::after { box-sizing: border-box; } body { margin: 0; }.header, .bottom-nav { position: fixed; z-index: 100; left: 0; right: 0; width: 100%; height: 56px; background-color: red; }.header { top: 0; }.bottom-nav { bottom: 0; }.wrapper { width: 100%; padding: 72px 16px; }.textfield { width: 100%; height: 56px; padding: 0 16px; }

 <header class="header"></header> <main class="wrapper"> <input type="text" id="textfield" class="textfield" /> </main> <nav class="bottom-nav"></nav>

If you add something to make the body scrollable, in Chrome for Android it works like a charm, but in Firefox it breaks, I don't know how it behaves in Safari as I don't have an iPhone, but basically the behavior it has in Chrome is the ideal state.

Answer 1

This solution is not bulletproof, but it works the same in both Firefox (105) and Chrome (106) for Android.

Add this to the CSS and change the JavaScript.:

.bottom-nav--hide {
    top: 100vh;
    bottom: auto;
}

const bottomNav = document.getElementsByClassName("bottom-nav")[0],
    viewportHeight = window.innerHeight;

window.addEventListener("resize", () => {
    let vh = window.innerHeight;
    if (vh < viewportHeight) {
        bottomNav.classList.add("bottom-nav--hide");
    } else {
        bottomNav.classList.remove("bottom-nav--hide");
    }
});

Situations in which it doesn't work.

• If the user opens the site in portrait and goes to landscape.
• If the user rescales the window and the height is less than the original height.