While working on a mobile e-commerce project, I received a new requirement. Specifically, the user needed to click the ‘buy’ button, and immediately a password input pop-up should appear, along with the on-screen keyboard. When I first got the requirement, I thought, “This should be pretty straightforward.” So, I quickly whipped up a simulated password input box, made it pop up when the user clicked the ‘buy’ button, and set the focus on the input field. I tested it on Chrome, and it worked perfectly. I thought I was brilliant! But when I tried it on my own phone, oh no! The keyboard pushed the entire page up, making the pop-up completely invisible. However, there were no issues on Android. I observed that this was because the keyboard’s behavior on Android and iOS is different. On Android, the keyboard appears and simply overlays the existing page, whereas on iOS, the keyboard pushes the entire page upwards. How to solve it? It’s actually quite manageable – just a little hack for each system.

The pop-up on the purchase page was positioned like this:

// 后面的遮罩
.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;
}

When the pop-up appears, we check if the current device is Android or iOS. If it’s an iOS device, we simply adjust the positioning of the password input box, and that solves it.

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

Ultimately, this achieved the desired outcome.

I’ve encountered similar issues before. For instance, if there’s an input field on a page, and you tap it on Android to bring up the keyboard, the keyboard won’t push the page up. This can lead to the input field being covered by the keyboard if it’s located lower down on the page, making the currently selected input field invisible and negatively impacting user experience. The solution is actually quite simple: when the keyboard pops up after tapping an input field, adjust the page’s scrollTop value so that the visible area of the page scrolls precisely to where the input field is, which resolves the problem.

These kinds of pitfalls often seem simple in hindsight, but when you first encounter them, you’re at a loss for a solution. Take the password input box issue, for example: at the time, I kept thinking about how to prevent the keyboard from pushing the page up. Approaching the problem from that angle would likely make it very difficult to find a solution, because mobile operating systems are designed that way; you can’t just use JavaScript to change how the keyboard appears, unless you write a simulated keyboard, but that would be overcomplicating things. However, if you change your perspective and try to solve it by adjusting the positioning of elements on the page, it becomes quite straightforward. So, when you encounter a problem, always try to think about solutions from multiple angles; this makes it much easier to find a resolution. Broaden your horizons, broaden your horizons!