0

I am making a webApplication in NextJs. I have to make it responsive for iPphone. The problem I am facing is when the user touches an input box it get disappears under the keyboard if the input is below portion of the screen. What should I do to fix this?

I am currently using direct javascript onFocus scroll workaround, but this not the best. I have to add it to every pages where the input field is available which is not dev friendly.

inputElement.addEventListener('focus', () => {
  window.scrollTo({ 
    top: inputElement.offsetTop - 50, 
    behavior: 'smooth' 
  });
});
Improve this question
4
  • 1
    Firstly, please note that '!' is used to denote excitement or shouting in text. You should use the '.' character to denote the end of sentences. I've edited the question to fix that for you. With regards to your question, your solution should work fine. If the issue is simply implementation, perhaps put a class on the elements that you do not want the keyboard to cover and then loop over them to apply that focus event handler. Commented May 8 at 13:25
  • Thank you so much for editing my question. Is it a normal situation for a web Application on an iPhone? I have to add a focus event? So, there is no problem with the layout or anything? Commented May 8 at 13:32
  • 1
    Yeah, it's a pretty standard behaviour. Commented May 8 at 13:34
  • 1
    Okay, thank you for your answer. Commented May 8 at 13:36
Related questions
40
How to set the textinput box above the Keyboard while entering the input field in react native
1
How do I resize my view to duck the iPad's keyboard?
110
prevent mobile default keyboard when focusing an <input> from showing
Load 2 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.