Как слушать открытие/закрытие клавиатуры в Javascript/Sencha?

У меня есть приложение HTML5/Javascript (Sencha), которое я упаковал в PhoneGap для iOS в XCode. Так или иначе, я хочу иметь возможность слушать открытые/закрытые события клавиатуры и что-то делать. Есть ли способ сделать это?

Ответ 1

Клавиатура будет автоматически вызываться, когда вы фокусируете текстовое поле, textareafield.... Таким образом, вы можете создать прослушиватель для события focus в javascript, который аналогичен прослушиванию события открытия клавиатуры. Также вы можете использовать прослушиватель размытия, чтобы закрыть клавиатуру.

Спасибо.

Ответ 2

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

https://github.com/driftyco/ionic-plugins-keyboard/tree/60b803617af49a10aff831099db90340e5bb654c

Он отлично работает на Android и iOS таким же образом, просто привяжите эти события:

window.addEventListener('native.showkeyboard', keyboardShowHandler);

window.addEventListener('native.hidekeyboard', keyboardHideHandler);

Ответ 3

Запускать открытый статус легко с помощью события onclick или onfocus, но при закрытии события onblur клавиатуры не запускается (поскольку курсор остается в input/textarea). Поэтому я нашел решение, обнаружив высоту окна, которая значительно изменилась при открытии/закрытии клавиатуры.

Он работает в современных браузерах на Android и iOS. Демо: http://jsfiddle.net/qu1ssabq/3/

При необходимости вы можете улучшить свой код для устройств, которые не поддерживают addEventListener или innerHeight - в Интернете есть доступные альтернативы.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui">
<title>Detect keyboard opened/closed event</title>
</head>
<body>

<textarea id="txta" onclick="xfocus()" onblur="xblur()"></textarea><br>

<span id="status" style="background: yellow; width: auto;">closed</span>

<script type="text/javascript">
  function xfocus() {
    setTimeout(function() {
      height_old = window.innerHeight;
      window.addEventListener('resize', xresize);
      document.getElementById('status').innerHTML = 'opened'; // do something instead this
    }, 500);
  }
  function xresize() {
    height_new = window.innerHeight;
    var diff = Math.abs(height_old - height_new);
    var perc = Math.round((diff / height_old) * 100);
    if (perc > 50)
      xblur();
  }
  function xblur() {
    window.removeEventListener('resize', xresize);
    document.getElementById('status').innerHTML = 'closed'; // do something instead this
  }
</script>

</body>
</html>

Ответ 4

Насколько я вижу, это возможно только в сборках Android для PhoneGap, см. запрос на pull здесь: https://github.com/phonegap/phonegap-android/issues/94.

События называются hidekeyboard и showkeyboard. Вы можете проверить, стреляют ли они на iOS тоже.

Ответ 5

Другое потенциальное (но очень хакерское) решение - наблюдать за событием изменения размера окна. Это не будет работать для всех вариантов использования, но на смартфонах изменение размера окна не так часто, поэтому события изменения размера, скорее всего, будут происходить при открытии клавиатуры. Этот код не протестирован, но он иллюстрирует общую идею:

let fullWindowHeight = window.innerHeight;
let keyboardIsProbablyOpen = false;

window.addEventListener("resize", function() {
  if(window.innerHeight == fullWindowHeight) {
    keyboardIsProbablyOpen = false;
  } else if(window.innerHeight < fullWindowHeight*0.9) {
    keyboardIsProbablyOpen = true;
  }
});

Может быть полезно использовать наряду с событиями фокусировки/размытия, чтобы помочь (например) обнаружить закрытие клавиатуры, когда пользователь нажимает кнопку "назад" (как указано @filipvkovic).