CODEWITHSUNDEEP
jqueryiosweb-applicationsinputkeyboard
Alex W
Alex W

Reputation: 1134

Keyboard covers text input in webapp ( iOS )

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.)

Upvotes: 11

Views: 11321

Answers (6)

Federico Fefe Tiranti
Federico Fefe Tiranti

Reputation: 21

I've found another solution for my case, this is the javascript code i've used:

with this solution, when 'myInputField' is focused the page scrolls to place 'myInputField' at the middle of the page.

window.onload = function(){ 
    var inputField = document.getElementById('myInputField');
    inputField.onfocus = function() {
        inputField.scrollIntoView({ 
            behavior: 'smooth',
            block: 'center' 
        });
    }
}

Upvotes: 0

Roman
Roman

Reputation: 21

I struggled with this problem for over 8 hours for the textarea and tried to avoid solutions like raising the input fields myself. I solved this problem, set autofocus to true, but set it to false for androids. getIOSdevice determines if the device is IOS. my markup:

<textarea
  v-model="clientMessage"
  :placeholder="getLangSendMsg"
  id="textarea"
  rows="4"
  wrap="hard"
  :autofocus="getIOSdevice"
></textarea>

Upvotes: 0

Lying_cat
Lying_cat

Reputation: 1508

Here is a solution that tested ok for both native and third-party keyboard:

    $('#foo').on('blur',function(){
        setTimeout(function(){
            window.scrollTo(0,document.body.clientHeight); 
　　  }, 300); 
    });

    $('#foo').on('focus',function(){
        setTimeout(function(){
            window.scrollTo(0,100000);
        }, 300); 

    });

$('#foo') is the input element you have issue with, the key here is to give a settimeout delay for the document scroll. Because we need some time to let ios keyboard popup to completes to get the proper document scroll top after popoup.

Upvotes: 0

t7tran
t7tran

Reputation: 2146

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)" />

Upvotes: 4

Michael King
Michael King

Reputation: 638

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)."

Upvotes: 0

thomasfuchs
thomasfuchs

Reputation: 1

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.

Upvotes: 1

Related Questions