Мне нужен нижний колонтитул, который всегда отображается на экране, кроме случаев, когда виртуальная клавиатура открыта. Это поведение по умолчанию на iOS, однако на Android нижний колонтитул поднимается над клавиатурой. Можно ли это предотвратить?

enter image description here

<div class="cont">
  <input />
  <input /> 
  <!-- Lots more inputs -->
</div>
<p class="footer">Footer</p>

.cont {
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: blue;
  color: white;
  text-align: center;
  height: 50px;
  line-height: 50px;
}

https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/qBbROeG

0
Evanss 18 Июн 2020 в 21:51

1 ответ

Лучший ответ

Вот демонстрация с использованием Jquery : https://codepen.io/nomi9995 / pen / ZEQLyyy

Вот демонстрация с использованием Javascript : https://codepen.io/nomi9995 / pen / eYJgLbo

Собственно при открытии клавиатуры. это resize экран. мы можем определить размер экрана и дать bottom для auto, когда клавиатура открыта, и дать нижнюю часть для 0, когда клавиатура закрыта

JQuery

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            var sumedges = $(window).width() + $(window).height();
    $(window).resize(function () {
      if ($(window).width() + $(window).height() < sumedges) {
        $(".footer").css("bottom", "auto");
      } else {
        $(".footer").css("bottom", "0");
      }
    });
}

Javascript

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            var sumedges = window.innerWidth + window.innerHeight;
            window.onresize = function () {
                if (window.innerWidth + window.innerHeight < sumedges) {
                    const footerArr = document.getElementsByClassName("footer");
                    for (let i = 0; i < footerArr.length; i++) {
                        footerArr[i].style.bottom = "auto";
                    }
                } else {
                    const footerArr = document.getElementsByClassName("footer");
                    for (let i = 0; i < footerArr.length; i++) {
                        footerArr[i].style.bottom = "0";
                    }
                }
            };
        }

enter image description here

0
Muhammad Numan 20 Июн 2020 в 19:34