Как предотвратить сноску мобильной клавиатуры под текстовыми полями?

У меня проблемы с моим нижним колонтитулом. Я хочу, чтобы нижний колонтитул оставался внизу экрана, но есть небольшая проблема. При использовании мобильного браузера некоторые поля блокируются нижним колонтитулом при открытии клавиатуры. Нижний колонтитул поднимается над клавиатурой и блокирует поле, которое вы вводите. Как я могу держать нижний колонтитул внизу и не допускать его поднятия над клавиатурой? Я хочу, чтобы он оставался скрытым под клавиатурой.

Я использую загрузчик, но я установил следующие вещи в своем собственном CSS:

footer {
 width: 100%;
 position:absolute;
 left:0px;
 bottom:0px;
 height: 40px;
 margin: auto;
 overflow: hidden;
 background:#2E2E2E;
 text-align:center;
 line-height: 15px;
 color: #fff;

}

<html>
 <body>
  <div class="container">
  </div>
  <footer class="bs-footer" role="contentinfo">
 </body>
</html>

Как вы можете видеть здесь. Когда я активирую поле "Salasana", нижний колонтитул поднимается и блокирует текстовое поле.

Перед открытием клавиатуры:

до

После открытия клавиатуры:

после

Источник

7 ответов

Решение

Решил проблему с помощью avinash. Я закончил тем, что изменил следующее в своем CSS. Поскольку у меня есть все содержимое внутри div контейнера, я сделал высоту контейнера 100% - нижний колонтитул. Я также удалил нижнюю часть:0px из нижнего колонтитула.

footer{
 position: relative;
}
html,body {
    height: 100%; /* Needed for container's min-height  */  
}

.container{
    min-height:100%;
    margin-bottom: -40px; /* Put negative height of the footer here */
    padding-bottom: 40px; /* Put height of the footer here. Needed for higher than screen height pages */
}
Источник

Я нашел решение, размещенное здесь на Stackru, довольно полезным. Он включает в себя фрагмент JavaScript, который решил эту проблему для меня, вставив ниже;

if(/Android [4-6]/.test(navigator.appVersion)) {
   window.addEventListener("resize", function() {
      if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
         window.setTimeout(function() {
            document.activeElement.scrollIntoViewIfNeeded();
         },0);
      }
   })
}
Источник

Если вы не хотите изменять HTML-код, попробуйте исправить это с помощью JS.

Мы получаем текущую позицию сверху, устанавливаем верхнее значение стиля и сбрасываем нижнее значение.

var fixed = document.querySelector(".fixed"),
    distanceFromTop = fixed.getBoundingClientRect().top;
fixed.style.top = distanceFromTop + 'px';
fixed.style.bottom = 'auto';
Источник

Попробуйте использовать положение: относительное или фиксированное

Если вы хотите, чтобы нижний колонтитул был внизу, вы должны добавить минимальную высоту к телу

Источник

Для нижнего колонтитула с фиксированным положением я расположил его относительно верхнего, а не нижнего колонтитула:

      footer {
  position: fixed;
  height: 40px;
  top: calc(100vh - 40px);
  /* bottom: 0; */
}
Источник

Я использую use-detect-keyboard-open с React, и он отлично работает.

Источник

Я сохраняю window.innerHeight в фокусе ввода и сбрасываю высоту при размытии ввода.

      document.addEventListener('focusin', function (e) {
    if (isInputElement(e.target)) {
        document.body.style.height = window.innerHeight + 'px';
    }
})

document.addEventListener('focusout', function (e) {
    if (isInputElement(e.target)) {
        document.body.style.height = '100%';
    }
})

function isInputElement(ele) {
    return ele &&
            ele.tagName === 'INPUT' ||
            ele.tagName === 'TEXTAREA' ||
            ele.getAttribute('contenteditable').toString() === 'true';
}
Источник
Другие вопросы по тегам