H5シャッターキーボードフォーカス可動端元素溶液

序文

最近のWebアプリケーションをやって、モバイルエンドの互換性の問題の多くを満たし、一つの質問は次のとおりです。箱トリガフォーカスを入力した後、キーボードがポップアップし、その後、入力ボックスをカバーしています。

そして、AndroidそしてIOS、この問題の症状には同じではありませんが、ネイティブのキーボードおよびサードパーティ製のキーボードは同じではありませんが、問題が同じ原因である：入力ボックスが隠されています。

所望の効果

ときにポップアップキーボード、可視領域での集中入力ボックスに、次の図のように：

キーボードは、パフォーマンスを片付け、ポップアップ表示します

IOS：

入力ボックスがフォーカスを取得し、ポップアップキーボードは、webview高さが変化しませんが、webviewロールアップし、スクロールの最大の高さscrollTopキーボードの高さのために。

あなたは、キーボード、または入力ボックスにページ領域外にボタンを離してクリックすると、入力ボックスには、キーボード離れて、フォーカスを失いました。
アンドロイド：

入力ボックスがフォーカスを取得し、キーボードがポップアップしますが、webview高さは、元の高さマイナスソフトキーボードの高さの高さを変更します。

入力ボックスの外側場合には、ヒット領域、入力ボックスには、ソフトキーボード離れて、フォーカスを失いました。そして、あなたはキーボード、離れたキーボードが、入力ボックスやフォーカス、負けないで離れてボタンをクリックしたときにピット。

ソリューション

入力ボックスでブロックされている場合IOS、中央、webview入力ボックスが自動的に可視領域にフォーカスを取得するような距離をロールアップ、およびになりAndroid、唯一の変更webview高さが、焦点はビジュアル要素のスクロールゾーンの事に起こることはありません。

だから、IOSあなたがコントロールすることはできませんが、Android入力ボックスが表示領域をスクロールするとき、キーボードがポップアップする必要があります。

デバイスタイプを取得します。

最初はを通じて、デバイスの種類を取得することですnavigator.userAgent取得することができます。

function judgeDeviceType() {
  let deviceType = null;

  if (!deviceType) {
    const ua = window.navigator.userAgent.toLocaleLowerCase();
    const isIOS = /iphone|ipad|ipod/.test(ua);
    const isAndroid = /android/.test(ua);

    deviceType = {
      isIOS: isIOS,
      isAndroid: isAndroid
    };
  }

  return deviceType;
}

イベントを監視します

IOSできるfocusとblurAndroidのポップアップし、片付けではなく、しかしためのイベントリスナキーボードwebviewの高さは、そうするために聞くことによって、なりresize事件を解決します。

export function listenAndroidKeybord() {
  const { isAndroid } = judgeDeviceType();

  if (isAndroid) {
    const androidResize = function() {
      // 将当前焦点元素滚动到可视区
      activeElementScrollIntoView();
    };

    // android 键盘弹出、收起，可视区高度会发生变化
    window.addEventListener('resize', androidResize, false);

    return () => {
      window.removeEventListener('resize', androidResize, false);
    };
  }
}

表示領域の要素にスクロール

表示領域にスクロール要素に、そこに2つの主な方法は、以下のとおりですscrollIntoViewし、scrollIntoViewIfNeeded携帯端末の互換性で、非常に良いです。

function activeElementScrollIntoView() {
  const activeEl = document.activeElement;

  if (
    activeEl.tagName === 'INPUT' || 
    activeEl.tagName === 'TEXTAREA'
  ) {
    window.setTimeout(() => {
      if ('scrollIntoView' in activeEl) {
        activeElt.scrollIntoView();
      } else {
        activeEl.scrollIntoViewIfNeeded();
      }
    }, 100);
  }
}

MiuiBrowser

上記のコードは、ほとんどのブラウザのキーボード閉塞の問題を解決するために言うことができるが、私はそれをやったとき、私のキビのキビの電話は時々手動でドラッグ、OK、時にはしないように、ブラウザテスト、問題、キーボードがポップアップし、ページ動か付属しています。

長い時間に従事する、私は2つの問題を発見し、自分の携帯電話のキビのブラウザに来る、userAgentにかからなかったAndroidIDを、しかししているMiuiBrowser識別ピット。その後、時々ないドラッグ、時々ページをドラッグして、私はそれがあるべきと思いwebview、質問の変更に非常に目に見える領域や私のコードを監視しresize、問題が発生します。

ソリューション

デバイスタイプ増加を解析

const ua = window.navigator.userAgent.toLocaleLowerCase();
const isMiuiBrowser = /miuibrowser/.test(ua);

聞いてfocusとblurキーボードがポップアップ表示をリッスンするイベント、した後片付け、およびbody高さを追加

body, html {
  height: 100%;
}

function listenMiuiBrowserKeybord() {
  const { isMiuiBrowser } = judgeDeviceType();

  if (isMiuiBrowser) {
    const inputFocus = function() {
      document.body.style.marginBottom = '50px';
      activeElementScrollIntoView();
    };

    const inputBlur = function() {
      document.body.style.marginBottom = '0px';
      activeElementScrollIntoView();
    };

    let $inputs = document.getElementsByTagName('input');
    for (let i = 0; i < $inputs.length; i++) {
      $inputs[i].addEventListener('focus', inputFocus, false);
      $inputs[i].addEventListener('blur', inputBlur, false);
    }

    return () => {
      for (let i = 0; i < $inputs.length; i++) {
        $inputs[i].removeEventListener('focus', inputFocus, false);
        $inputs[i].removeEventListener('blur', inputBlur, false);
      }
    };
  }
}

ピット：このプログラムは問題がポップアップ解決するが、収納ボタン、キーボードをクリックし、Androidの下の入力ボックスには、失うの焦点は、体は高さがゼロになると増加させるためにフォーカスニーズを失うことはありません。

リマーク

ソリューションは、ピットロード上のステップが長い、完璧ではありません。