Cordova plugin keyboard shows a black block

Questions
1

Hi, I’m developing my first app with framework7. I had to run it for iPhone 6 and the iOS platform version is iOS 4.5.5.
I’m building the app with 8.1.2 ([email protected]). However the keyboard of the iPhone overlays the input that I want to compile, especially with inputs which are at the end of the page.
To solve the issue I installed the Cordova-plugin-keyboard suggested by @nolimits4web.
But when I open the keyboard to compile the input a black div appears above the keyboard.
This is the issue

IMG_0001
IMG_0001.PNG750×1334 43.4 KB

I included the js files inside my index.html and I included them in this order
index.js, cordova.js, framework7.min.js

this is my index.js

var app = {
// Application Constructor
initialize: function() {
    document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},

onDeviceReady: function() {
	console.log('deviceready');
	Keyboard.shrinkView(true);
    
},


};

app.initialize();

How can I solve it? if I remove Keyboard.shrinkView this not happens but the keyboards still to overlays the input. If I leaves it this black block happens above the keyboard and don’t show the page to compile.

Thank you in advance for your help

2

Looks like a bug in a plugin https://github.com/cjpearson/cordova-plugin-keyboard/issues/77

Try to install also this plugin https://github.com/apache/cordova-plugin-wkwebview-engine

3

Thank you Vladimir, I didn’t find this questions… I tried to install wkwebview-engine… but with this plugin the app don’t run… the index.html remains a white page and there are not error on the console

4

My bits to this:

use the ionic-webview plugin, which worked for me

    <plugin name="cordova-plugin-ionic-webview">
        <variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
    </plugin>
    <preference name="Scheme" value="http" />
    <plugin name="cordova-plugin-ionic-keyboard" />

it also uses the wkwebview Engine, but kinda works better :slight_smile:

What you have to take care of is that it now uses http://localhost:8080 for your app so you have to allow all your google services if you are using and so on to allow requests from localhost

Another thing is if you are using an API, which you mange yourself, you have to allow

Origin: http://localhost:8080

or

  Header set Access-Control-Allow-Origin "*"
1 Like
5

After some research i have fixed this ios12 issues by using ionic keyboard plugins and ionic webview plugins. Version 4 of ionic-webview messes up cordova because the scheme is changed to ionic://localhost and I am unable to switch it to http. So I installed version 2. Make sure you uninstall cordova-plugin-keyboard

cordova plugin remove cordova-plugin-keyboard
cordova plugin add cordova-plugin-ionic-keyboard
cordova plugin add [email protected]

Then add <preference name="KeyboardResize" value="true" /> to config.xml