topic How to send soft-keyboard input to a Phaser/JavaScript game in Software Archive

How to send soft-keyboard input to a Phaser/JavaScript game

Vladimir_Z_ — Thu, 16 Jun 2016 10:42:27 GMT

I managed to open soft-keyboard on android trough focusing an input element of type text. Yes I can type letters but i need those letters sent inside my Phaser/JavaScript game.

I used jQuery for the job and tried keypress() event but it doesn't seem to be working.

What should I do in this case, how can i get those letters to JavaScript?

Some of my code:

<input id="hiddenInput" type="text" name="hiddenInput" style="position:absolute; left:-1px; top: -1px; width:1px; height:1px; opacity:0"/>

$("#hiddenInput").focus(); // i call this when I press the play button.

$("#hiddenInput").keypress(function (e) {
          this.logTextField.text += "hello "; // logTextField is of type Phaser.Text and it should show hello text once I press keyboard button
 }); // this event function is not called at all

Also this is my android section in intelxdk.config.additions.xml

<platform name="android">
    <!-- below requires the splash screen plugin -->
    <!-- docs: https://github.com/apache/cordova-plugin-splashscreen -->
    <preference name="SplashMaintainAspectRatio" value="false" />
    <preference name="windowSoftInputMode" value="adjustPan" />
    <preference name="configChanges" value="orientation|keyboardHidden" />
    <preference name="loadUrlTimeoutValue" value="700000" />
</platform>

Do these settings prevent something from happening or not?

Note: I guess for regular from based cordova applications it is easier to set up the keyboard since you see the text fields, but what if you don't see it or should not see it?

I changed the JS code above

Vladimir_Z_ — Thu, 16 Jun 2016 14:33:55 GMT

I changed the JS code above to this:

$(document).keydown(function (e) {
         var val = $("#hiddenInput").val(),
             lastKey = val.charAt(val.length - 1),
             keyCode = val.charCodeAt(val.length - 1);

         SI.GameScreen.fillScreenTypingTextField($("#hiddenInput").val() + "\n ");
         SI.GameScreen.keypressHandler(lastKey, keyCode);
         $("#hiddenInput").val("");
 });

I forgot to call keypressHandler() which accepts two parameters and is a custom made function, so now effectively I send data to my Phaser game.

Still more to do. Now with keydown() event function the last letter is remembered again even when I press different button.

Something like: Press "y" and then press "o", screenTypingTextField text field is again filled with "y" instead of "o".

Need to investigate more.

I recommend using the Debug

Elroy_A_Intel — Thu, 16 Jun 2016 16:39:15 GMT

I recommend using the Debug tab within Intel XDK. You will be able to investigate how your application's functions are processing the values provided via a USB connection to your Android device running your app.

Indeed the Debug mode enabled

Vladimir_Z_ — Fri, 17 Jun 2016 10:05:48 GMT

Indeed the Debug mode enabled me to find a solution:

$(document).keyup(function (e) {
        var val = $("#hiddenInput").val(),
            lastKey = val.charAt(val.length - 1),
            keyCode = val.charCodeAt(val.length - 1);
            
        console.log("keyup: " + val + ", " + lastKey + ", " + keyCode);
        SI.GameScreen.keypressHandler(lastKey, keyCode);
});

Instead of keydown() I use keyup() which sends the key code after you release the button.