Windows Phone 8.1 WinJS Keyboard Page Resize

Question

I am currently writing an app using WinJS with Windows Phone 8.1. The issue I am encountering now, is that whenever a user taps on a login input box the keyboard appears and displaces the page. This makes the page longer and scrollable; how do I prevent this?

Answer 1

You should be able to prevent this with the EnsuredFocusedElementInView property.

You can register an event listener to fire when virtual keyboard starts showing, and set event.ensuredFocusedElementInView = true to prevent the app from resizing the visual viewport, which is what causes the longer, scrollable, page.

// React to Soft Keyboard events
var virtualKeyboard = Windows.UI.ViewManagement.InputPane.getForCurrentView();
virtualKeyboard.addEventListener("showing", function (event) {
  event.ensuredFocusedElementInView = true; // Prevent visual viewport resize.
  }, false);