How do I use PhoneGap's soft keyboard (org.apache.cordova.plugin.softkeyboard)?

Question

I'm writing my first PhoneGap app, and I need to make the keyboard appear and disappear programmatically. Unfortunately, it's not working, but I wonder if I'm doing it correctly. Here's the state of things:

I used $ cordova plugin search keyboard to find this plugin at the command line, and then I installed it like this:

$ cordova plugin add org.apache.cordova.plugin.softkeyboard Fetching plugin "org.apache.cordova.plugin.softkeyboard" via plugin registry Installing "org.apache.cordova.plugin.softkeyboard" for android

Based on another SO answer, I then added this line to my config.xml:

<plugin name="SoftKeyBoard" value="org.apache.cordova.plugin.SoftKeyBoard" />

I put softkeyboard.js in myapp/www/js/, and I referenced it in the html like so:

<script type="text/javascript" charset="utf-8" src="js/softkeyboard.js"></script>

After installing, SoftKeyboard.java appeared in myapp/plugins/org.apache.cordova.plugin.softkeyboard . But just for good measure I also put a copy in myapp/src/org/apache/cordova/plugin/ .

Finally, I added these to my html:

<button id="keyboard">Toggle Keyboard</button>

and

<script> var softkeyboard = window.cordova.plugins.SoftKeyBoard; $('#keyboard').toggle(softkeyboard.show, softkeyboard.hide); </script>

As you might have guessed, nothing happened when I rebuilt and clicked the button. What should I be doing differently?

Thanks!

P.S. - After seeing plugin (singular) and plugins (plural) used in so many SO answers, I renamed everything both ways and that didn't affect the outcome.

Answer 1

After adding plugin with cordova add plugin command, it's not necessary to include plugin's js file. You only need to include cordova.js (I think you have already done that, but better to clarify):

<script type="text/javascript" charset="utf-8" src="cordova.js"></script>

After adding plugin, you should build or prepare project to get plugin in action. Cordova cli tool will copy the javascript and native (android, ios, etc) codes into platforms/%platform_name% directory. Plugins will not work in browser mostly, but never in /www directory (as there should be no cordova.js inside that dir).

I think the problem here is jQuery toggle function that you use. It is actually a function for toggling display state of the element. (see: http://api.jquery.com/toggle/)

This will work when you emulate or run your android app.

<script>
   var isKeyboardShown = false;
   var softkeyboard = window.cordova.plugins.SoftKeyBoard;
   $('#keyboard').click(function() {
       (isKeyboardShown = !isKeyboardShown) ? softkeyboard.show() : softkeyboard.hide();
   });
</script>