Develop Reference

Android softkeyboard issue with input in focus

I have an issue with the android softkeyboard overlapping the input fields when in focus. I have tried various solutions but to no avail. My application is built using phonegap I have tried to change the android:windowSoftInputMode to various solutions but everything doesn't work. these are the issues i ahve
1) The login screen input field does not focus into the center of the screen when in focus unless it is typed into. This is when the android:windowSoftInputMode="adjustPan".
2) If android:windowSoftInputMode="adjustResize" the input field does come into the center of the screen but only when typed into and this also breaks the layout of a bottom nav bar which is pushed up by the keyboard.
Does anyone have any advice on what I should do??

I had the same problem. Here is a workaround:
Install com.ionic.keyboard plugin
Set this in your config.xml
<preference name="fullscreen" value="true" />
Add this to the bottom of your page
<div id="kbs" class="keyboardspace"></div>
Give the surrounding element the id "frame"
Add this to your css
.keyboardspace {
width: 100%;
height: 0;
}
Now register these two event listeners (I'm using jquery here, but it should also be possible without)
var window = angular.element($window);
window.on('native.keyboardshow', function (e) {
$("#kbs").height(e.keyboardHeight);
var focus = $(document.activeElement);
var pos = focus.offset();
var bottom = pos.top + focus.height() + 10;
var maxpos = $($window).height() - e.keyboardHeight;
if (bottom > maxpos) {
$("#frame").scrollTop(bottom - maxpos);
}
});
window.on('native.keyboardhide', function () {
console.log("native.keyboardhide");
$("#kbs").height(0);
});
Note that the frame has to be scrollable for this to work.

You use this code in your Softkeyboard.java:
#override
public void onComputeInsets(Insets outInsets){
super.onComputeInsets(outInsets);
if(!isFullscreenMode()){
outInsets.contentTopInsets = outInsets.visibleTopInsets;
}
}

Phonegap Android keyboard covers input elements scrolling is disabled

I've tried many different solutions and nothing is quite what I want. What I want is for the keyboard to show on top of the content (keeping the content the same size) while being able to scroll to input elements that are covered by the keyboard.
Every solution I've tried will either give me one or the other, but not both.
Solutions I've tried:
Solution here. Adding android:windowSoftInputMode="adjustPan" and android:configChanges="orientation|keyboardHidden" to the main activity in my AndroidManifest.xml.
The above solution using "adjustResize" instead of "adjustPan".
Solution here. Adding to my confix.xml.
Using adjustPan keeps my elements the same size, but disables scrolling. Using adjustResize resizes the entire page, making everything miniature. Keeping default settings, only the wrapper containing the input elements is resized, but scrolling is enabled.
I managed to find the exact same problem (unanswered) here. They were able to "fix" it by resizing their app to 150% and scroll to the covered input element, but like they said it's not ideal.
Any help is appreciated.

For most of the cases in config.xml change the full screen preference to false. that'll do the trick.
<preference name="fullscreen" value="false" />

I have the most efficient solution to scroll into input automatically and make it visible.
First you need to add the ionic keyboard plugin (works on any cordova project) because the eventlistener 'showkeyboard' does not work now.
cordova plugin add ionic-plugin-keyboard --save
Then on your event handler of 'keyboardshow' event add the following code:
window.addEventListener('native.keyboardshow', function(e){
setTimeout(function() {
document.activeElement.scrollIntoViewIfNeeded();
}, 100);
});
P.S: This is supported only on Android (Chrome) and Safari. :D

I had the same problem for android project output and in my situation the input elements were not moving upwards the keyboard . And after a-night-taking search (including those config changes and others) I found that in my angularjs cordova project
StatusBar.overlaysWebView(true);
StatusBar.hide();
lines which are in my controller causing that annoying problem . And I was using those lines for ios statusbar issues now I took those in an if condition and the problem is fixed.
if( device.platform=="iOS")
{
StatusBar.overlaysWebView(true);
StatusBar.hide();
}

You can detect focused textarea or input, then wait a while until keyboard is shown and finally scroll the page to reach focused input.
$("#textarea").focus(function(e) {
var container = $('#container'),
scrollTo = $('#textarea');
setTimeout((function() {
container.animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});
}), 500);
});
When keyboard is hidden the textarea keeps focused, so if it's clicked again the keyboard will show and the container needs to scroll again to show the input
$("#textarea").click(function(e) {
e.stopPropagation();
var container = $('#container'), //container element to be scrolled, contains input
scrollTo = $('#textarea');
setTimeout((function() {
container.animate({
scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
});
}), 500);
});
Hope this helps, cheers!

I added an event listener for the keyboard event and scrolled to the input only if it was off screen.
For my case I only wanted to scroll when the keyboard was being shown for the first time, and only if the input item was offscreen.
document.addEventListener('showkeyboard', onKeyboardShow, false);
function onKeyboardShow(e) {
setTimeout(function() {
e.target.activeElement.scrollIntoViewIfNeeded()
}, 500) //needed timeout to wait for viewport to resize
}
To get the showkeyboard event to fire I needed to have the following in my AndroidManifest.xml
android:windowSoftInputMode="adjustResize"

I was also facing the same issue as it is a framework related issue. I have found work around-
constructor(
private platform: Platform,
private keyboard: Keyboard
) {
if(this.platform.is('android')){
this.keyboard.onKeyboardShow().subscribe((e) => {
var keyboardHeight = e.keyboardHeight;
keyboardHeight = keyboardHeight ? keyboardHeight : '337';
$('body').css('height', 'calc(100vh - ' + keyboardHeight + 'px)');
});
this.keyboard.onKeyboardHide().subscribe(e => {
$("body").css("height", "100vh");
});
}
}
I have used 337 which is keyboard height for default, mainly for that condition if keyboard height in not available.
library needed:
npm install jquery
npm install #types/jquery
ionic cordova plugin add cordova-plugin-ionic-keyboard
npm install #ionic-native/keyboard
imports
import { Platform } from '#ionic/angular';
import * as $ from "jquery";
import { Keyboard } from '#ionic-native/keyboard/ngx';

I came up with this solution. I have a full screen Vuejs application which the container has the height of the screen height and then absolute positioned to the bottom, left and right to fix the same sort of issue on IOS.
I then had the same issue on Android so came up with the following;
window.cordovaPluginIonicKeyboardShift = function()
{
/** This is my container (Vuejs instance) **/
const inst = document.querySelector('#app');
/** Get the height of the document **/
const height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
/** Where we will store the active input **/
let input;
/** The keyboard displaying is around 200 milliseconds **/
inst.style.transition = 'transform 0.2s';
/** Makes me feel better having this on to increase performance **/
inst.style.transform = 'translateZ(0)';
/**
* Set Input
* #param e
*/
let setInput = function(e) {
input = e.target;
};
/**
* On Keyboard Show
* #param event
*/
let onKeyboardShow = function(event) {
let offset = input.getBoundingClientRect();
if(offset.top + input.clientHeight > height - event.keyboardHeight) {
inst.style.transform = `translateZ(0) translateY(-${event.keyboardHeight}px)`;
}
};
/**
* OnKeyboard Hide
*/
let onKeyboardHide = function() {
inst.style.transform = `translateZ(0) translateY(0px)`;
};
/**
* Hide Keyboard
* #param e
*/
let hideKeyboard = function(e) {
if(e.target.tagName.toLowerCase() !== 'input' && e.target.tagName.toLowerCase() !== 'textarea') {
if(typeof input !== 'undefined') input.blur();
if(Keyboard.isVisible) Keyboard.hide();
}
};
/**
* Go through all inputs and textarea's on document and attach touchstart
* event. Using touchstart to define the input before focus which is what will trigger
* the keyboard.
*/
inst.querySelectorAll('input, textarea').forEach(function(elm) {
elm.removeEventListener('touchstart', setInput, false);
elm.addEventListener('touchstart', setInput, false);
});
/**
* Need to get the height to shift the document up by x amount
*/
window.removeEventListener('keyboardWillShow', onKeyboardShow, false);
window.addEventListener('keyboardWillShow', onKeyboardShow, false);
/**
* Shift it back down on keyboard hiding
*/
window.removeEventListener('keyboardWillHide', onKeyboardHide, false);
window.addEventListener('keyboardWillHide', onKeyboardHide, false);
/**
* Some browsers/phone models act odd when touching off the input
* so this is in to cover all bases
*/
document.removeEventListener('touchstart', hideKeyboard, false);
document.addEventListener('touchstart', hideKeyboard, false);
};
It also turns out even installing the plugin has affected the normal use of the keyboard which is why the hide method is called as the keyboard doesn't go away without it.
Then on my Vuejs instances I have the following updated method;
updated: function () {
this.$nextTick(function () {
cordovaPluginIonicKeyboardShift();
})
},
You'll also need to add this plugin;
phonegap cordova plugin add cordova-plugin-ionic-keyboard
Doing the above I have a successfully working fullscreen app with a working keyboard.
If you find yourself testing on Xcode Simulator and the keyboard is not showing, go to Simulator -> Device -> Erase all content and settings and re-install the app. No idea why this occurs but this will save you a lot of head aches.
Hope this helps someone

I figured out the problem. I have a media query in my CSS where the size of certain elements change for smaller screen sizes. Editing that query fixed my problem.

I am using the Cordova plugin 'ionic-plugin-keyboard' and listen to the 'native.keyboardshow' and 'native.keyboardhide' events to resize the HTML container element of my form:
window.addEventListener('native.keyboardshow', function (e) {
container.style.bottom = e.keyboardHeight + "px";
});
window.addEventListener('native.keyboardhide', function () {
container.style.bottom = null;
});
This results in the proper input fields to scroll into view (also when tabbing back and forward between the fields.

If you have made correctly the project as Cordova documentation says, It won't happen.
May be are you using a scroll library like iScroll?

Popup menu scroll with the page in jquerymobile

I have create an popup menu in my app the problem with it is when i open the popup menu and then scroll the page the popup menu also scrolls up with the page even i tried using data-dismissible="false" but nothing happen still the problem remains same.
Thanks in advance.

There's an easy fix for this problem. Just prevent page scrolling when popup is active.
Working jsFiddle example: http://jsfiddle.net/Gajotres/aJChc/
For this to work popup needs to have an attribute: data-dismissible="false" it will prevent popup closure when clicked outside of it. Another attribute can be used: data-overlay-theme="a" it will color popup overlay div. That is a DIV that covers screen when popup is opened and prevents popup closure.
And this javascript will work on every possible popup:
$(document).on('popupafteropen', '[data-role="popup"]' ,function( event, ui ) {
$('body').css('overflow','hidden');
}).on('popupafterclose', '[data-role="popup"]' ,function( event, ui ) {
$('body').css('overflow','auto');
});

For me this method didn't work, it works on browser but not in Phone Gap application.
So I resolve it in this way:
$('#Popup-id').on({
popupbeforeposition: function(){
$('body').on('touchmove', false);
},
popupafterclose: function(){
$('body').off('touchmove');
}
});
Hope it helps!

if body scrolling is not prevented, try below. in my case i was using boilerplate.css so the preventing the body scrolling not worked.
popupafteropen: function (e) {
$('html').css('overflow', 'hidden');
},
popupafterclose: function (e) {
$('html').css('overflow', 'auto');
}

Android Browser Triggers jQuery $(window).resize() on scrolling

I have recently come across something quite wierd, I'm not sure if it's maybe me just missing something but I can't understand why this is happening.
I have a site that has the following jQuery snippet running on it:
$(window).resize(function(){
alert("Resize fired!");
});
When I go to the site on an Android phone browser, and simply scroll up and down the site, I can see the alert.
The Android browsers scroll bars (which fade in and out) are overlayed ontop of the entire site and don't seem to cause any resizing of the window, so I'm guessing this event isn't being fired by them.
Does anyone know why the Android browser is firing this event on scrolling?
Any information will be greatly appreciated.
EDIT:
I have tried setting CSS for body, setting overflow-y to scroll to see if that was a viable solution but the event is still being fired on scrolling on Android.
EDIT #2:
I am using the following metatag in my HTML:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

I was having the same problem, my solution was to check if the window size actually changed, for doing it I needed to store the past window width somewhere in my app. The code could be something like this:
$(window).resize(function() {
clearTimeout(app.resize.timer)
app.resize.timer = setTimeout(function(){
var window_changed = $(window).width() != app.size.window_width
if(window_changed) console.log('Window size changed! resize site')
}, 500)
})
I did not count on the window height because my Android browser hides and shows the address textbox when I scroll down the site making the window height change on vertical scroll

#john-mccollum is correct in the comments. It appears to be the disappearing browser interface causing a change in height that triggers the resize event. So check for change in width specifically in your function if you are doing responsive design stuff where you want to check if the width has been resized.
$(window).resize(function(){
var w = $(window).width();
if (typeof checkw == 'undefined') checkw = w;
if (w!=checkw) {
console.log("The width changed from "+checkw+" to "+w);
// do your responsive magic!
checkw = w;
}
});
Not required to make this work, but this pairs well with the Paul Irish / John Hann "smartresize" method.

i'm having the same problem too!
the problem is true because the height of the browser in Android will change when the url bar hide and show. So, we have to make the browser reload only happens when the width size changes.
i saw this question in Stackoverflow show me how to do this. And this is the jsfiddle.
var doit;
function resizedw(appwidth){
var window_changed = $(window).width() != appwidth;
if ($(window).width() != appwidth){
("body").append("did it"+appwidth+" ");
}
past_width = $(window).width();
}
var past_width = $(window).width();
window.onresize = function() {
clearTimeout(doit);
doit = setTimeout(function() {
resizedw(past_width);
}, 100);
};

Android Webview (Phonegap): Disable Autocorrect, Autocapitalize and autocomplete doesn't work

i have a problem with my loginpage which is loaded in a Webview on Android (Phonegap).
i used the attributes autocorrect="off" autocomplete="off" autocapitalize="off" for my input fields and form tag but it doesn't work. the device shows simmilar words and the content goes up and down when i type a letter or number.
have anybody an idea how i can fix this problem?
cheers

i have the same problem and after googling for hours , finally i got the solution
used the following attributes
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
I tested it on android 4.2 and its working
Turn off predictive text for password field on websites

I don't think these attributes apply to Android. They are iPhone specific. The autocorrect options are configured via the main Settings in Android.

You should try to use a cordovasoftkeyboard plugin and show it on input text focus, hide it on blur. This avoid a lot of weird behaviors for me. However this will always show the basic soft keyboard (not the number soft, email soft etc...)
$(document).on({
blur : function(){
if(OS = "and")
cordova.plugins.SoftKeyboard.hide();
},
focus : function(e){
if(OS = "and"){
e.preventDefault();
cordova.plugins.SoftKeyboard.show();
if(Windows.currentWindow == null){
$('html, body').stop().animate({//permet de scroller l'input en haut
scrollTop: ($(this).offset().top)-80//header
}, 800);
}
return false;
}
}
}, ':input[type="text"],[type="number"],[type="email"]');
https://github.com/phonostar/PhoneGap-SoftKeyboard

I just discovered it!, you only have to add into your input this: name="password" and that solves it.