The input field is hidden when a soft keyboard appears in the phone table

Question

Create a mobile application using Phonegap 3.6.3 for Android and iOS. The problem is only for Android, since iOS acts as I would like.

When I click on an input text box or text box, a soft keyboard appears. It sometimes covers these elements.

Pages are placed inside iScroll, at the bottom right, and another absolute div, so I can’t scroll through any of them after the screen appears. I suspect that I need to change the web view to a smaller one when the keyboard appears. However, after trying many things, it does not work.

config.xml

<preference name="permissions" value="none" /> <preference name="phonegap-version" value="3.5.0" /> <preference name="orientation" value="default" /> <preference name="target-device" value="universal" /> <preference name="fullscreen" value="false" /> <preference name="webviewbounce" value="true" /> <preference name="prerendered-icon" value="false" /> <preference name="stay-in-webview" value="false" /> <preference name="ios-statusbarstyle" value="black-opaque" /> <preference name="detect-data-types" value="true" /> <preference name="exit-on-suspend" value="false" /> <preference name="show-splash-screen-spinner" value="false" /> <preference name="auto-hide-splash-screen" value="false" /> <preference name="disable-cursor" value="false" /> <preference name="android-minSdkVersion" value="13" /> <preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" /> <preference name="android-installLocation" value="auto" /> <preference name="SplashScreen" value="splash" /> 

(tried many different values ​​for android-windowSoftInputMode as below)

  <preference name="android-windowSoftInputMode" value="stateVisible|adjustResize|adjustPan" /> 

web page head

  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> 

(yes, I tried a lot too)

all that you can perceive as relevant, let me know. Unfortunately, I do not have the right to share too much code, but as far as I understand, all that we need to worry about.

Thanks,

Answer 1

Delete this line from config.xml

 <preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" /> 

And change the line in "head of web page" to

 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 

Answer 2

I also had the same problem - the main problem is that you cannot edit the androidManifest file with the Build corridor. All you can do is edit the config.xml file, which really allows you to change a limited subset of the settings. I would like to change windowSoftInputMode .

I found a solution to my problem. which was the keyboard appearing above the fields at the bottom of the screen, which I think is the same problem as yours. I used cordova 2.9.0 and cordova 3.6.0

Solution 1: I found a solution to change this parameter in config.xml

 <preference name="fullscreen" value="false" /> 

This means that this parameter is set to "false" instead of "true" - the page now scrolls to open the field that you edit when you open the keyboard. (more precisely, I believe that the viewport changing, not scrolling up. I hope that you are right in your part of the viewport)

Solution 2: Try removing or replacing this line from config.xml

 <preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" /> 

as

 <preference name="android-windowSoftInputMode" value="stateVisible|adjustResize"/> 

instead of this. Now it works for me.

Solution 3: Try adding this style to your page.

 <style> <item name="android:windowTranslucentStatus">true</item></style> 

EDIT:

If you use jQuery , you can try this.

 $('input, textarea, button, a, select').off('touchstart mousedown').on('touchstart mousedown', function(e) { e.stopPropagation(); }); 

Answer 3

My solution used the Ionic keyboard plugin and implemented this code:

HTML:

 <div id="page" class="page-content"> ... </div> 

CSS

 .page-content { height: 100%; overflow: auto;} 

JavaScript:

• when keyborad is open

    window.addEventListener('native.keyboardshow', function (e) { var deviceHeight = window.innerHeight; var keyboardHeight = e.keyboardHeight; var deviceHeightAdjusted = deviceHeight - keyboardHeight;//device height adjusted deviceHeightAdjusted = deviceHeightAdjusted < 0 ? (deviceHeightAdjusted * -1) : deviceHeightAdjusted;//only positive number document.getElementById('page').style.height = deviceHeightAdjusted + 'px';//set page height document.getElementById('page').setAttribute('keyBoardHeight', keyboardHeight);//save keyboard height }); 

• when the keyboard is closed

    window.addEventListener('native.keyboardhide', function (e) { setTimeout(function () { document.getElementById('page').style.height = 100 + '%';//device 100% height }, 100); 

To provide a better user interface, add this code for all inputs.

 var inputs = document.querySelectorAll('input');//select all input var n = inputs.length; for (var i = 0; i < n; i++) { var input = inputs[i]; input.addEventListener('focus', function (e) {//add event focus var inp = this; //wait 0.6 seconds to scroll down to the input has focus setTimeout(function () { try { //if the keyboard is open if (cordova.plugins.Keyboard.isVisible) { var padding = 15; var targetPosition = parseInt($$(inp).offset().top + padding); var keyboardHeight = parseInt(document.getElementById('page').getAttribute('keyBoardHeight'));//get keyboard height //if the input is hidden by the keyboard,scroll to the input if (targetPosition >= keyboardHeight) { padding *=5; document.getElementById('page').scrollTop = targetPosition - padding; } } } catch (ex) { alert(ex.message); } }, 600); }, true); 

Answer 4

Esta funciona muy bien.

config.xml

plugin name = "com.ionic-for-phonegap.keyboard" spec = "0.0.1" source = "pgb"

  window.addEventListener('native.hidekeyboard', keyboardHideHandler); window.addEventListener('native.showkeyboard', keyboardShowHandler); function keyboardHideHandler(e){ alert('Goodnight, sweet prince'); } function keyboardShowHandler(e){ alert('Keyboard height is: ' + e.keyboardHeight); } 

Answer 5

I have the most effective solution for automatically scrolling input and its visibility. First you need to add a keyboard plugin (cordova add com.ionic.keyboard plugin) as mentioned in @Fedir. Then, on your keyboardshow event handler, add the following code:

 window.addEventListener('native.keyboardshow', function(e){ setTimeout(function() { document.activeElement.scrollIntoViewIfNeeded(); }, 100); }); 

PS: This is only supported on Android (Chrome) and Safari .: D

Answer 6

Only one solution that worked for my fullscreen application was to add an ionic-plugin-keyboard plugin to the Cordoba application

 cordova plugin add com.ionic.keyboard 

JS Code:

 // This event fires when the keyboard will hide window.addEventListener('native.keyboardshow', keyboardShowHandler); function keyboardShowHandler(e){ $("body").addClass("keyboardOn"); } // This event fires when the keyboard will show window.addEventListener('native.keyboardhide', keyboardHideHandler); function keyboardHideHandler(e){ $("body").removeClass("keyboardOn"); } 

After that, you can customize the view using CSS.

ref .: fooobar.com/questions/613301 / ...

Answer 7

My app uses fullscreen / immersive Android mode. I solved this by switching modes as soon as the keyboard appears / disappears.

I installed the plugins cordova-plugin-fullscreen and ionic-plugin-keyboard and added this code:

 document.addEventListener('deviceready', function(){ // disable immersive mode on Android when keyboard is shown try { if (cordova.platformId == 'android') { AndroidFullScreen.immersiveMode(false, false); window.addEventListener('native.keyboardshow', function (e) { AndroidFullScreen.showSystemUI(false, false); }); window.addEventListener('native.keyboardhide', function (e) { AndroidFullScreen.immersiveMode(false, false); }); } } catch (error) { console.log('deviceready - ' + error); } }, false); 

Answer 8

I use the Ionic Keyboard Plugin to detect when the keyboard is open and add the necessary additions to the body:

 phonegap plugin add ionic-plugin-keyboard --save 

When events fire, you can configure the padding-bottom on the body to match the height of the keyboard.

Then, to detect if the focused element is visible, you need to do the math and scroll the container if necessary. The final code that I use is as follows:

 cordova.plugins.Keyboard.disableScroll(true); $$(window).on('native.keyboardshow', function(e) { $$('body').css('padding-bottom', e.keyboardHeight + 'px'); var el = $$('input:focus, textarea:focus'); var content = el.closest('.page-content'); var offset = el.offset().top + content.scrollTop(); /* 15 is an arbitrary value to add a bit of padding */ var safeAreaHeight = el.outerHeight(true) + 15; var maxPosition = content.height() - safeAreaHeight; if (content.scrollTop() < (offset - maxPosition)) { content.scrollTop(offset - maxPosition); } }); $$(window).on('native.keyboardhide', function(e) { $$('body').css('padding-bottom', 0); }); 

The code uses Framework7 and its Dom7 library, which is very similar to jQuery. The scrollable .page-content element is .page-content , but you can adjust it accordingly.

You should leave the default android-windowSoftInputMode preference.

Answer 9

1. Define the Input element above and add a CSS property that will hide the on-screen keyboard.
2. Set Focus to prepare it for entering the scanner in the text box.

3. Last step Turn off Read Only mode for data entry.

    yourInputVal = document.getElementById('myInputElement'); yourInputVal.readOnly = true; yourInputVal.focus(); setTimeout(function(){ document.getElementById('myInputElement').readOnly = false; }, 

Answer 10

Just add the following line to config.xml so that it ..

 <preference name="android-windowSoftInputMode" value="stateVisible|adjustResize"/>