携帯ECサイトで、ある要件を受け取りました。 具体的には、ユーザーが購入ボタンをクリックした後、直接パスワード入力のポップアップを表示し、キーボードを立ち上げるというものです。 この要件を受け取ったとき、私は「これは簡単だ」と思いました。 そこで、手早く模擬のパスワード入力欄を作成し、ユーザーが購入ボタンをクリックしたときにそれを表示させ、inputフィールドにフォーカスが当たるようにしました。 Chromeで試してみると、全く問題なく動作し、「自分は天才だ！」とさえ思いました。しかし、自分のスマートフォンで試してみると、oh no ~、キーボードが直接ページを押し上げてしまい、ポップアップが何を表示しているのか全く見えなくなってしまいました。 しかし、Androidでは全く問題ありませんでした。観察してみると、AndroidとiOSではキーボードの表示動作が異なるためだと分かりました。Androidではキーボードが表示されると、元のページの上に直接オーバーレイされますが、iOSではキーボードが表示されると、ページ全体が押し上げられます。 どうやって解決するのか？実はこれもかなり簡単に解決できます。異なるシステムに対して少しハックするだけです。

購入ページのこのポップアップの配置は、次のように設定されています：

// 后面的遮罩
.dialog-wrap {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: relative;
}
// 密码输入框
.password-dialog {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
}

ポップアップが表示されるときに、現在のデバイスがAndroidかiOSかを判断し、iOSデバイスであれば、パスワード入力欄の配置を調整すればOKです。

$(".go-buy").click(function () {
  showPassword(); //调出弹窗
  if (!device.android) {
    //  如果不是安卓，那就调整定位
    $(".password-dialog").css({
      top: "initial",
      bottom: "20px",
    });
  }
});

最終的に目標を達成しました。

以前にも同様の問題に遭遇したことがあります。例えば、ページにテキスト入力欄があり、Androidで入力欄をクリックしてキーボードを表示させたとき、キーボードがページを押し上げないため、入力欄がページの下の方にあると、表示されたキーボードに隠れてしまい、現在選択されている入力欄が見えなくなり、ユーザーエクスペリエンスに影響を与える可能性があります。解決策はこれも非常に簡単で、入力欄をクリックしてキーボードが表示されたときに、ページのscrollTop値を調整し、ページの表示領域がちょうど入力欄の場所にスクロールするようにすれば、この問題も解決できます。

これらの落とし穴は、後から見ればどれも非常に簡単なことですが、初めて遭遇したときはどう解決すればいいか全く分かりませんでした。例えば、パスワード入力欄の件では、当時、どうすればキーボードがページを押し上げないようにできるかばかり考えていました。もしその視点から解決策を考えようとすると、おそらく解決策を見つけるのは非常に困難でしょう。なぜなら、モバイルOSの実装ではそのように規定されているため、JavaScriptでキーボードの表示方法を変更することはできません。模擬キーボードを作成しない限りは、それは遠回りな方法です。しかし、視点を変えて、ページ上の要素の配置を調整することで解決しようとすれば、それは非常に簡単です。 ですから、問題に直面したときは、必ず複数の視点から解決策を考えるべきです。そうすることで、より簡単に問題の解決策を見つけることができます。視野を広げ、視野を広げましょう！