Keyboard covers text input in webapp (iOS)

Question

I am working on a webapp with two input fields in the bottom half of the screen. Parental representation is positioned absolutely on the screen. As a rule, one would assume that when you click on the input field, the focus will force the input in the view above the keyboard. However, the keyboard closes the input field.

If I start typing, nothing is entered in the box. To enter a field, I have to press the next arrow and then the previous arrow (> go to field No. 2, then <return to field 1) to get an input for viewing.

I tried adjusting the view to have overflow scroll, relative position and programmatic focus focus on click. None of these solutions work. Unfortunately, I can find answers related to UITextViews and people who have completely opposite problems (i.e. do not want it to scroll automatically.)

Answer 1

A simple solution for everyone:

Log the onfocus event on the inputs you want to always see, as shown below. Since we do not know when the keyboard will be fully displayed, the code will be executed every 300 milliseconds 5 times (duration 1.5 seconds). You can customize it to your liking.

Only one caveat for this solution is that it relies on scollIntoView , which may not work in some older browsers (see http://caniuse.com/#search=scrollIntoView ), of course you can replace it with an equivalent algorithm for achieve the same result. Anyway, this simple solution should give you this 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

Here is a quote from the answer to a similar question in Scrolling to the selected item when entering iphone safari on the virtual keyboard

"Good, so this is probably the worst hack you'll ever see, but nothing hits.

What you can do is change the position of the text field dynamically (using javascript) to a fixed position: fixed, this will change the position of the text field relative to the browser window, not the page. This should make the scroll of the Iphone irrelevant, and your text box should be at the top of the page no matter what. Then onBlur the css position is again set to relative (which should put it back in place).

To make it prettier, you can put the div behind the onFocus text box so that it hides the actual content of the site, and you could center the text box using the top and left css properties (just make sure they are cleared onBlur too).

Answer 3

Without the given code example, this is hard to say, but you can try to register the click handler in the first field, and then focus the second field in it, and then the first field again, which in jQuery will look something like this:

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

Most likely, this will not work, but it is worth a try. Otherwise, you will have to start messing with your CSS and positioning. Unfortunately, in some cases WebKit on iOS is a mistake when it comes to moving and scaling a window to display input fields and a keyboard.