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
Show Only a Limited Number of Rows in a Table
Javascript Sum and Group by of Json Data
Update Value in Localstorage Array by Existing Key
Scrollable Table With Fixed Headers and Fixed First Column
Drawing Curved Svg Arrow Lines from Div to Div
Javascript Backslash (\) in Variables Is Causing an Error
Javascript Form Submit - Confirm or Cancel Submission Dialog Box
How to Sort Elements in an Array into Order and Even Numbers and They Should Be in Ascending Order
Jquery Ajax Call to Controller Action Passing Array of Values
How to Find If a Text Contains Url String
Why Does JavaScript Map Function Return Undefined
How to Disable Eslint Rule Max Line Length for Paragraph in <Template> of Vue.Js
Prevent Form Redirect or Refresh on Submit
How to Iterate Through Json Nested Objects With Ngfor
How to Make My Discord Bot Send a Message When a Specific User Plays a Specific Game
Expected Corresponding Jsx Closing Tag for Input Reactjs
How to Create a Dynamic Jquery Data Table With Json Data and Ajax