Блог

Главная - Вопросы по программированию - Определение виртуальной клавиатуры на экране и альбомной ориентации в javascript

Определение виртуальной клавиатуры на экране и альбомной ориентации в javascript

#javascript #html #css #mobile

#javascript #HTML #css #Мобильный

Вопрос:

Я работаю над мобильным приложением на основе html, где требуется разрабатывать приложение только для книжной ориентации и отображать сообщение пользователю, когда он переходит в альбомную ориентацию, эта функция отлично работает с css media query, но проблема в том, что у меня есть форма в приложении, и когда я нажимаю на любое текстовое поле, открывается виртуальная клавиатура и изменяется высота экрана, и она показывает мне сообщение для изменения ориентации

Теперь я хочу спросить, есть ли какой-либо способ изменить, когда меняется фактическая ориентация и когда появляется виртуальная клавиатура на экране. Заранее спасибо 

 @media screen and (orientation: landscape) {

}

Я проверил другие вопросы, связанные с моей темой в stackoverflow, но там ничего полезного

Ответ №1:

Краткий ответ:

Нет, к сожалению, в настоящее время нет способа определить, когда виртуальная клавиатура появляется на экране. Определение ориентации да, это возможно с помощью:

  1. медиа-запросы css (как в вашем примере)
  2. через JavaScript с использованием orientationchange прослушивателя.
  3. через JavaScript с использованием resize прослушивателя и определение ориентации с помощью window.innerHeight > window.innerWidth

Длинный ответ:

Не должно быть причин, по которым клавиатура влияет на orientation свойство, которое интерпретируется вашим медиа-запросом css следующим образом:

 @media screen and (orientation: landscape) {
    ...
}

В рекомендации по медиа-запросам W3C указано следующее для orientation свойства:

Медиа-функция ‘ориентация’ является ‘портретной», когда значение медиа-функции «высота» больше или равно значению медиа-функции «ширина». В противном случае ‘ориентация’ будет ‘альбомной’.

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

В прошлом у меня возникала ваша проблема при использовании эмуляторов устройств, таких как режим устройства в более старых версиях devtools от Google Chrome. Однако, когда это было протестировано на реальных мобильных устройствах, проблема не возникла.

Кроме того, в мобильном Chrome открыта эта ошибка, которая может вызывать события изменения размера при появлении клавиатуры.

Возможно, эмулятор, если это то, что вы используете, неправильно изменяет высоту видовых экранов, что приводит к изменению orientation свойства в вашем медиа-запросе.

Простая суть, которую я предоставил ниже, заключается в следующем (вы можете попробовать запустить ее в своей среде разработки, чтобы посмотреть, что произойдет):

  1. Когда мобильное устройство находится в книжной ориентации, на экране отображаются два поля ввода формы (отображающие слова: ‘foo’ и ‘baz’).
  2. Когда я касаюсь любого из полей ввода формы, отображается клавиатура, и содержимое страницы не изменяется.
  3. Когда устройство поворачивается на 90 градусов в альбомную ориентацию, появляется серая панель со словами: «Повернуть устройство в книжную ориентацию»

ПРИМЕЧАНИЕ: Перечисленные выше шаги — это то, что происходит при тестировании приведенной ниже сути на нескольких реальных мобильных устройствах, работающих под управлением Safari на iOS и mobile Chrome на Android (… не эмуляторах!).

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>StackOveflow question 40175207</title>
    <meta name="description" content="Example gist using orientation css media query to hsow message when device is landscape" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">

body {
    padding: 0;
    margin: 0;
}

.wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.message-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: gray;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);

    will-change: transform;
}

.message-panel__text {
    position: absolute;
    top: 50%;
    text-align: center;
    font: 1em Helvetica, sans-serif;
    width: 100%;
    height: 50px;
    margin: auto;
    -webkit-transform: translateX(-50%);
            transform: translateY(-50%);
}

@media screen and (orientation: landscape) {
    .message-panel {
        transform: translateX(0);
    }
}

</style>

</head>
<body>
    <div class="wrapper">
        <form>
            <input type="text" name="input-one" value="foo">
            <input type="text" name="input-two" value="baz">
        </form>
        <div class="message-panel">
            <div class="message-panel__text">Rotate your device to portrait</div>
        </div>
    </div>
</body>
</html>

PS: В Chrome для Android также есть манифест веб-приложения, который позволяет вам также блокировать ориентацию устройства. Смотрите здесь для получения дополнительной информации.

Надеюсь, это поможет!

Ответ №2:

Вы не можете определить, есть виртуальная клавиатура или ее нет, только используя CSS. Вам нужно будет использовать некоторый javascript.

Если вы используете Cordova для создания приложения, попробуйте использовать плагин Keyboard. Он запускает событие всякий раз, когда клавиатура отображается или скрыта, чтобы вы могли как-то на это отреагировать, т.Е. добавьте некоторый класс в <body> , который предотвратит отображение сообщения.

https://github.com/driftyco/ionic-plugin-keyboard

Другим подходом было бы прослушивание события «focus» для всех возможных элементов, которые могут вызвать появление клавиатуры.

 $(document.body).on("focus", "textarea, input", function() {
   $(document.body).addClass("do-not-show-message");
}).on("blur", "textarea, input", function() {
   $(document.body).removeClass("do-not-show-message");
});;

Ответ №3:

Вы можете определить фокус на вводе. Весьма вероятно, что устройство покажет виртуальную клавиатуру в мобильной версии вашего приложения. Чтобы выяснить это, вы можете сравнить высоту некоторого элемента. Например, приложение имело высоту 800 пикселей, ничего не изменилось (не было переворачивания экрана), но высота изменилась, и теперь она составляет 500 пикселей. И также вы знаете, что основное внимание уделяется полю ввода. Это может означать, что на экране появилась виртуальная клавиатура. Или нет в некоторых случаях 🙂

Комментарии:

1. Итак, в основном ваше решение иногда работает, а иногда нет?

2. Правильно. Я думаю, это сработает на 90 процентов, а может и больше.

Ответ №4:

У меня возникли проблемы с созданием представления чата в HTML. Заголовок вверху, центр контента и поле чата внизу. В конце концов, это было решение, которое я выбрал

  • Гибкий блок для макета
  • Высота flexbox установлена на 100vh.
  • Поскольку 100vh в Safari проблематичны, определите Safari с помощью js и установите значение 100%

Вот скрипка, которая показывает мое решение 

 var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
if (isSafari) {
  document.body.className = "is-safari";
}  
 html,
body {
  padding: 0;
  margin: 0;
}
.chat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  width: 100%;
  height: 100vh;
  background: white;
}
.is-safari .chat {
  height: 100%;
}
.chat__header,
.chat__footer {
  background: whitesmoke;
  height: 60px;
}
.chat__body {
  flex: 1;
}  
 <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Chat View</title>
</head>

<body>
  <div class="chat">
    <div class="chat__header">Header</div>
    <div class="chat__body">Body</div>
    <div class="chat__footer">Footer</div>
  </div>
</body>

</html>

Ответ №5:

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

  1. Высота клавиатуры превышает 50 пикселей, что помогает игнорировать изменение размера экрана вручную.
  2. Ширина не изменяется при отображении клавиатуры. Это позволяет избежать того, что кто-то поворачивает свой экран.

По сути, при загрузке страницы сохраняются высота и ширина. Здесь вы можете выполнить дополнительные проверки, чтобы убедиться, что страница загружена не в альбомной ориентации. После этого любое событие изменения размера выполняет проверку. Уменьшилась ли высота на 50 пикселей или более, в то время как ширина осталась прежней? Если да: клавиатура, скорее всего, была показана! Если высота увеличивается более чем на 50 пикселей, а ширина остается неизменной, клавиатура была скрыта.

 window.onload = WindowOnload;
window.onresize = WindowResize;

function WindowOnload() {
    document.body.setAttribute("height", window.innerHeight);
    document.body.setAttribute("width", window.innerWidth);
    if(window.innerHeight < window.innerWidth) { /* Page loaded in landscape */ }
}

function WindowResize() {
    const previousWidth = parseInt(document.body.getAttribute("width"));
    const newWidth = window.innerWidth;
    const previousHeight = parseInt(document.body.getAttribute("height"));
    const newHeight = window.innerHeight;

    if(previousWidth === newWidth) {
        if(previousHeight > newHeight 50) { /* Keyboard was displayed */ console.log("shown"); }
        else if (previousHeight 50 < newHeight) { /* Keyboard was hidden */ console.log("hidden"); }
    }

    document.body.setAttribute("height", window.innerHeight);
    document.body.setAttribute("width", window.innerWidth);
}