My problem is the keyboard. I have a blank div with an embed iframe. This iframe is a Dashboard from Power BI and there are two date inputs (to filter the data) that when the user click a calendar open, fine.
In the same time the keyboard open and crash everting. I tried a lot to block the keyboard with js but its impossible. Some examples:
function hideKeyboard() {
//this set timeout needed for case when hideKeyborad
//is called inside of 'onfocus' event handler
setTimeout(function() {
//creating temp field
var field = document.createElement('input');
field.setAttribute('type', 'text');
//hiding temp field from peoples eyes
//-webkit-user-modify is nessesary for Android 4.x
field.setAttribute('style', 'position:absolute; top: 0px; opacity: 0; -webkit-user-modify: read-write-plaintext-only; left:0px;');
document.body.appendChild(field);
//adding onfocus event handler for out temp field
field.onfocus = function(){
//this timeout of 200ms is nessasary for Android 2.3.x
setTimeout(function() {
field.setAttribute('style', 'display:none;');
setTimeout(function() {
document.body.removeChild(field);
document.body.focus();
}, 14);
}, 200);
};
//focusing it
field.focus();
}, 50);
}
var field = document.createElement('input');
field.setAttribute('type', 'text');
document.body.appendChild(field);
setTimeout(function() {
field.focus();
setTimeout(function() {
field.setAttribute('style', 'display:none;');
}, 50);}, 50);
$(document).keydown(function(e) {
if (e.keyCode == 70) {
return false; // Equivalente a: e.stopPropagation(); e.preventDefault();
}
});
$('input[type="text"]').keydown(function(e) {
e.stopPropagation();
});
$('#dp1496686765253').focus(function() {
this.blur();
});
var hideKeyboard = function() {
document.activeElement.blur();
$("input").blur();
};
$('input[type="text"]').keydown(function(e) {
e.stopPropagation();
});
$('#dp1496686765253').focus(function() {
this.blur();
});
$(document.activeElement).filter(':input:focus').blur();
I test on my phone, Android 7.0 Motorola.
Anyone know how to block Keyboard? Only this page, because I have Login page.
Thanks.
UPDATE - config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.XXXX.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>XXXX</name>
<description>
A basic Framework7 template for PhoneGap.
</description>
<author email="XXXXXXX" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<preference name="android-minSdkVersion" value="14" />
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference name="BackupWebStorage" value="none" />
</platform>
<preference name="DisallowOverscroll" value="true" />
<preference name="HideKeyboardFormAccessoryBar" value="true"/>
<plugin name="cordova-plugin-whitelist" spec="~1.2.0" />
<plugin name="cordova-plugin-console" spec="~1.0.1" />
<plugin name="cordova-plugin-statusbar" spec="~1.0.1" />
<platform name="ios">
<icon src="./drawable-ldpi/img/volcano.png" platform="android" qualifier="ldpi" />
<icon src="./drawable-mdpi/img/volcano.png" platform="android" qualifier="mdpi" />
<icon src="./drawable-hdpi/img/volcano.png" platform="android" qualifier="hdpi" />
<icon src="./drawable-xhdpi/img/volcano.png" platform="android" qualifier="xhdpi" />
<icon src="./drawable-xxhdpi/img/volcano.png" platform="android" qualifier="xxhdpi" />
<icon src="./drawable-xxxhdpi/img/volcano.png" platform="android" qualifier="fr-xxhdpi" />
</platform>
</widget>