0

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>
  • try this :: cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); OR You can mark the input field as read only and then create a function for an onclick event to display the datepicker. – Hiten Jun 06 '17 at 05:53
  • Hi friend, I've already have this on my config.xml I'll update my question with this information. Thanks. – Vinicius Kostriuba Jun 06 '17 at 15:23
  • Try this using jQuery $('#datepicker').focus(function() { this.blur(); }); – Hiten Jun 07 '17 at 04:00
  • Hiten, I changed the Power BI Display. Calendar to Slider and now the problem gone. Thanks. – Vinicius Kostriuba Jun 07 '17 at 17:24

0 Answers0