Detect when the soft keyboard is in use. Abd Run JS function?
I have a site that opens a modal click that contains a form. I noticed on my iPad that when the soft keyboard is open it covers several form fields, and as I get closer to the bottom of the screen, I cannot scroll to reveal those hidden fields.
While researching this issue, I came across this answer , which includes the code from this answer . However, none of these answers work when tested on iOS 8.3.
This is what I would like to achieve:
- Detection when opening the keyboard.
- Find the keyboard height.
- Add padding to the bottom of the footer to accommodate the keyboard height.
- When the keyboard is tilted or closed, padding is removed.
Several things can be noted:
- If someone is using a connected keyboard (including bluetooth keyboards) do nothing as the soft keyboard should not appear
- jQuery is fine.
- The solution should be done through client side code.
- I prefer a solution that covers iOS and Android. Preferably, any device that can use a soft keyboard.
How can I achieve a solution that will increase padding in the footer that will work on most devices when someone is using the soft keyboard as their modal form fill tool?
source to share
I ran into a problem similar to this not too long ago and I found a small solution for this, when the mobile or tablet is in use and the keyboard is activated, it fires a screen resize event so you can use that to trigger the function.
var lastHeight = $(window).height(); // store the intial height.
var lastWidth = $(window).width(); // store the intial width.
var keyboardIsOn = false;
$(window).resize(function () {
if ($("input").is(":focus")) {
keyboardIsOn =
((lastWidth == $(window).width()) && (lastHeight > $(window).height()));
}
if(keyboardIsOn){
var keyboardHeight = lastHeight - $(window).height();
$("footer").css("padding", keyboardHeight+"px");
} else{
$("footer").removeAttr("style");
//or if you just want to remove the padding
//$("footer").css("padding", 0);
}
});
//An alternative solution is by checking if the height of the screen
//change on input/textarea focus.
$('input, textarea').focus(function() {
keyboardIsOn =
((lastWidth == $(window).width()) && (lastHeight > $(window).height()));
if(keyboardIsOn){
var keyboardHeight = lastHeight - $(window).height();
$("footer").css("padding", keyboardHeight+"px");
} else{
$("footer").removeAttr("style");
//or if you just want to remove the padding
//$("footer").css("padding", 0);
}
});
source to share