Have you ever tapped on an input field on mobile and suddenly the screen jumps or the input disappears under the keyboard? This is a common UX issue caused by how mobile browsers handle the on-screen keyboard.

The Problem:

When a user focuses on an input field, the mobile browser opens the keyboard and shifts the layout abruptly. This often results in the input field being pushed out of view or causing unexpected scroll jumps.

The Solution:

Using JavaScript’s scrollIntoView method, you can smoothly bring the focused input into view and center it on the screen:

input.addEventListener("focus", () => {
  setTimeout(() => {
    input.scrollIntoView({ behavior: "smooth", block: "center" });
  }, 300);
});

The setTimeout ensures this runs after the keyboard appears, giving you better control over the scroll behavior.

Why It Matters

• Keeps the user focused on the form
• Prevents layout jumps and disorientation
• Provides a smoother, more professional mobile experience