Software Archive
Read-only legacy content
17061 Discussions

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

Vladimir_Z_
Beginner
836 Views

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?

0 Kudos
3 Replies
Vladimir_Z_
Beginner
836 Views

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.

0 Kudos
Elroy_A_Intel
Employee
836 Views

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.

0 Kudos
Vladimir_Z_
Beginner
836 Views

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. 

0 Kudos
Reply