keyboard events not working.

Jimboidaho

unread,

Dec 3, 2015, 3:28:26 PM12/3/15

to phonegap

I have been trying to get the ionic-plugin-keyboard plugin to work. I am using cordova 5.4.0. I have installed the plugin and I verified that the plugin files are there. I have the following code setup to add events.

    onDeviceReady: function() {
        app.receivedEvent('deviceready');
            /* Calls to `Keyboard` object here */

//        setTimeout(function(e){
            console.log('set keyboard events');
            document.addEventListener('native.keyboardshow', this.keyboardshow, false);
            document.addEventListener('native.keyboardhide', this.keyboardhide, false);
//        },2000);
*/

    },

The callbacks I have setup are not working at all. If you noticed, I even tried to put a setTimeout() around the code to delay setting the events in case the app wasn't quite ready. Yes, the onDeviceReady event is working.

Not sure where to go from here.

Thanks.

Kerri Shotts

unread,

Dec 3, 2015, 4:39:40 PM12/3/15

to phonegap

Not really enough information. What device(s) are you testing on? What version(s) of the OS? Anything in the JS console? system console?

Jimboidaho

unread,

Dec 3, 2015, 5:48:52 PM12/3/15

to phonegap

Sorry, I am using a Lenovo 7" tablet android version 4.4. The code is in the index.js file that is installed when the project is first created. There are two other large js files that I am using in my JQM project and I am also using Jquery and JQM but I am not sure how that would affect anything. I have another empty project that I could test with if you think that might be important.

Thanks.

Jimboidaho

unread,

Dec 4, 2015, 6:03:30 PM12/4/15

to phonegap

I tried this on a sample project I found called workshop. I stripped all the JS out except for the app.js file. Code below. Looking at the explorer, there none of the objects are available that the docs say to use. I used this command to install the plugin "cordova plugin add ionic-plugin-keyboard". It looks like the plugin is not available at run time?? The index.html file has simply and input tag.

Thanks.

var app = {
    // Application Constructor
    initialize: function() {
        console.log('init');
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {


        console.log('set keyboard events');


        document.addEventListener('deviceready', this.onDeviceReady, false);


        document.addEventListener('native.keyboardshow', this.keyboardshow, false);
        document.addEventListener('native.keyboardhide', this.keyboardhide, false);


    },
    onDeviceReady: function() {
    },
    keyboardhide:function(){
        console.log('hide');
//        $(".main-page-footer").addClass('hidediv');
    },
    keyboardshow:function(){
        console.log('show');
//        setTimeout(function(){$(".main-page-footer").removeClass('hidediv')},300);
    }
}
app.initialize();
function test(){
    console.log(native);
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>

<p><button class="help-btn">Help</button></p>
<div class='header'><h1>Directory</h1></div>
<input type="button" onclick="test()" value="test">
<div class='search-view'>
    <input class='search-key' type="search" placeholder="Enter name"/>
    <ul class='list employee-list'></ul>
</div>

<!--<script src="lib/jquery.js"></script>-->
<!--<script src="js/services/memory/EmployeeService.js"></script>-->
<script src="js/app.js"></script>

</body>
</html>

Kerri Shotts

unread,

Dec 5, 2015, 12:06:57 PM12/5/15

to phonegap

Try waiting until `deviceready` to bind to the keyboard events. Anything you do with a plugin should wait until you have received a `deviceready` event.

Also, what version of the plugin are you using? And what does your config.xml look like?

Jimboidaho

unread,

Dec 6, 2015, 8:44:45 AM12/6/15

to phonegap

Plugin Info. <plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"

    id="ionic-plugin-keyboard"
    version="1.0.8">

config file.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.jim.workshop" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Workshop</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="d...@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <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">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

Reply all

Reply to author

Forward