How to Prevent iOS Keyboard from Pushing the View Off Screen With CSS or Js

How to prevent iOS keyboard from pushing the view off screen with CSS or JS

first

<script type="text/javascript">
$(document).ready(function() {
document.ontouchmove = function(e){
e.preventDefault();
}
});

then this

input.onfocus = function () {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}

Prevent virtual keyboard from pushing content up

You can take a look at this StackOverflow post, but I'll summarize the most useful parts for you:

Start off with the input's CSS as position: fixed;. When in focus, change it to absolute. Here is an example with JS:

if (document.getElementById("fixed") == document.activeElement) {
document.getElementById("fixed").class += "absolute"
}

Of course, that relies on CSS:

#fixed {
...
position: fixed;
}
#fixed.absolute {
position: absolute;
}

I hope this helps!

How to prevent keyboard push up webview at iOS app using phonegap

On focus, set window.scrollTo(0,0); This prevents keyboard from pushing up webview completely

$('input').on('focus', function(e) {
e.preventDefault(); e.stopPropagation();
window.scrollTo(0,0); //the second 0 marks the Y scroll pos. Setting this to i.e. 100 will push the screen up by 100px.
});

If you don't want to set a static value for your Y scroll position, feel free to use this short plugin I've written that automatically aligns the keyboard underneath the input field. It's not perfect, but it does the job. Just call this on focus as shown above:

setKeyboardPos(e.target.id);

The keyboard pushes a div up & out of the screen

it's bug in ionic, once you focus on any input the keyboard will show up and will add padding-bottom for the scroll-content class to lift the for above the keyboard and it doesn't remove the padding-bottom after you close the keyboard.
I tried to check if I have any JS event on the mobile keyboard but we don't so my work around is to set a fixed padding-bottom for the scroll-content class to prevent changing it on the runtime.

.scroll-content {
padding-bottom: 0 !important;
}


Related Topics



Leave a reply



Submit