CODEWITHSUNDEEP
javascriptioscss
LiranC
LiranC

Reputation: 2480

iOS Safari keyboard appearence does not trigger window.resize event

I have a layout that needs to respond to a keyboard appearnce.

I have prepared a small Demo that shows how inner height respond to the keyboard appearance. You can tap the input to bring up the keyboard.

// select the paragraph element
const innerHeightParagraph = document.getElementById("inner-height")

// set the innerHeight for the first time.
innerHeightParagraph.innerText = window.innerHeight

// register resize event.
window.addEventListener('resize', function() {
  innerHeightParagraph.innerText= window.innerHeight
})
p {
  font-size:60px; margin:0px;


}
<h1>Current InnerHeight</h1>
<p id="inner-height"></p>
<input></input>

What is a suggested workaround for iOS?

Upvotes: 9

Views: 4052

Answers (1)

Ivan
Ivan

Reputation: 872

window.visualViewport.addEventListener can be used and it is triggered whenever a keyboard is shown/hidden

  if (window.visualViewport) {
    window.visualViewport.addEventListener("resize", () => {
      console.log("visualViewport RESIZE IS TRIGGERED");
    });
  }

Upvotes: 4

Related Questions