Keyboard covers text input in webapp ( iOS )

Question

I am working on a webapp with two input fields in the lower half of the screen. The parent view is positioned absolutely to the screen. Typically, one would assume when clicking the input field, the focus would force the input into view above the keyboard. However, the keyboard is covering the input field.

If I start typing, nothing is input into the field. In order to type in the field, I have to hit the next arrow and then the previous arrow (> to go to field #2 then < to go back to field 1) to get the input in to view.

I have tried adjusting the view to have overflow scroll, position relative and programmatically setting focus upon tap. None of these solutions are working. Unfortunately, I can only find answers related to UITextViews and people that have the exact opposite problems (i.e. not wanting it to automatically scroll.)

Answer 1

Simple solution for anyone interested:

Register onfocus event on the inputs you want to be always visible like the example below. As we don't know when the keyboard will be fully rendered, the code is executed for every 300 milliseconds 5 times (duration of 1.5 seconds). You can adjust it to your own taste.

Only one caveat to this solution is that it relies on scollIntoView which may not work on some old browsers (see http://caniuse.com/#search=scrollIntoView). Of course, you can replace it with an equivalent algorithm to achieve the same result. Anyway, this simple solution should give you the idea.

var scrolling = function(e, c) {
  e.scrollIntoView();
  if (c < 5) setTimeout(scrolling, 300, e, c + 1);
};
var ensureVisible = function(e) {
  setTimeout(scrolling, 300, e, 0);
};

<p>Some text here</p>
<input type="text" value="focus me" onfocus="ensureVisible(this)" />
<p>Some text here</p>
<input type="text" value="select me" onfocus="ensureVisible(this)" />

Answer 2

Without a reduced code example it's hard to tell, but you could try registering a click handler on the first field, and then focus the second field in it, and then the first field again, which in jQuery would look something like this:

$('#first_field').on('click', function(){
  $('#second_field').focus();
  $('#first_field').focus();
});

Chances are this won't work, but it's worth a try. Otherwise you'll have to start messing with your CSS and the positioning. Unfortunately in some cases WebKit on iOS is buggy when it comes to repositioning and zooming the window to show input fields and the keyboard.

Answer 3

Here's a quote from an answer to a similar question at Scrolling to selected element while typing on iphone safari virtual keyboard

"Ok, so this is probably the worst hack you will ever see, but it beats nothing.

What you could do is change the position of the text box dynamically (using javascript) to fixed, position:fixed, this will change the position of the textbox to be relative to the browser window instead of the page. This should render the Iphone's scrolling irrelevant and your text box should be at the top of the page no matter what. Then onBlur, the css position is set to relative again (which should put it back in its place).

To make this prettier you could put a div behind the textbox onFocus so it hides the actual site content, and you could center the textbox using the top and left css properties (just make sure to clear those too onBlur)."