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.