web-dev-qa-db-ja.com

Javascript / Senchaでキーボードの開閉を聞く方法は？

XCodeでiOS用PhoneGapにパックしたHTML5/Javascript（Sencha）アプリがあります。どういうわけか、キーボードの開閉イベントを聞いて、それに応じて何かをしたいと思っています。これを行う方法はありますか？

javascriptiossencha-touchkeyboard-events
13
Groppe

Textfield、textareafield ...にフォーカスしている間、キーボードが自動的に呼び出されます。したがって、キーボードのopenイベントをリッスンするのと同様に、JavaScriptでfocusイベントのリスナーを作成できます。また、blurリスナーを使用して、キーボードのクローズを処理することもできます。

ありがとう。

16
heyjii

同じ問題が発生しました。あなたの場合の最善の解決策は、次のようなネイティブイベントをバインドするPhoneGapプラグインを使用することだと思います。

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

AndroidとiOSでも同じように機能し、これらのイベントをバインドするだけです。

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

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

オープンステータスのトリガーは、onclickまたはonfocusイベントを使用して簡単ですが、キーボードを閉じるときにonblurイベントは発生しません（カーソルが入力/テキスト領域に残っているため）。そこで、キーボードの開閉で大きく変化するウィンドウの高さを検出することで解決策を見つけました。

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>
3
mikep

もう1つの潜在的な（しかし非常にハッキーな）解決策は、ウィンドウのサイズ変更イベントを監視することです。すべてのユースケースで機能するわけではありませんが、スマートフォンではウィンドウのサイズを変更することはあまり一般的ではないため、サイズ変更イベントはキーボードの開口部から発生する可能性があります。このコードはテストされていませんが、一般的な考え方を示しています。

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で指摘されています）。

1
joe

私が見る限り、これはPhoneGapのAndroidビルドでのみ可能です。ここでプルリクエストを参照してください： https://github.com/phonegap/phonegap-Android/課題/ 94 。

イベントはhidekeyboardおよびshowkeyboardと呼ばれます。 iOSでも起動するかどうかを確認できます。

1
Jan Jongboom