I have tried:

• 'medium'
• 'regular'
• 'Medium'
• 400
• '400'

None of them seem to make any difference.

http://i.imgur.com/wA5dCJN.png

In the documentation it mentions that a good solution to the mobile on-screen keyboard triggering a resize event is to disable resizing if a static property is set..

Also, when the keyboard is shown, sometimes a resize event will be triggered.
Ideally you use a custom resize event, check for the static property PhaserInput.KeyboardOpen and don't resize when it's set to true.

I have this so far but am struggling to work out how to actually disable the resize in Phaser..

 window.addEventListener("resize", function(event){
		    if ( PhaserInput.KeyboardOpen == true )
			{
			    // Disable Resize
			}
		});

Am I on the right track or is there a better way to do this?

game.add.plugin(Fabrique.Plugins.Input);

should be:

game.add.plugin(Fabrique.Plugins.InputField);

It seems like when I use input_field_object.anchor.setTo(0.5) and it seems like does anchor the input field to center, but the input itself is out of aligned.

Is this expected behavior?

Reason I am doing this way because I want the center of the input field to be absolute based on game.word.centerX, if do that without anchor - it seems like the left of the input box is where the start of the x and y coords begin.

Very random bug, but sometimes input box just disappear and random text appears.
Yup I know that there is already an opened issue about that. But You gave no solution still.

The cursor does not appear，Because update function are not performed， so i code like this, "this.game.time.events.loop(Phaser.Timer.SECOND/3, this.update, this);", it is right?

The Node v5.x.x requirement for the NPM package is out of date given the latest release of Node is 7.x.x.

I'm using this plugin for a phaser game, when players enter their name for the high score list, and everything is working very well. One small issue, though, is that the html page that the game is embedded in scrolls to the very top of the page when the text field is clicked. This happens in both Chrome, FireFox, Opera, Edge, and IE.

I'm wondering if it would be possible to add a flag that could prevent this behaviour? Or maybe there's some workaround for it?

I have a different use case where the input is reused for chat or command input. I got this to work but it was fiddly. Here's how.

remove the following from phaser-input.js (probably should be up to the app anyways)

if (evt.keyCode === 13) {
    this.endFocus();
    return;
}

Here I am using WASD for movement, so disabling that is needed during chat input.

this.startInput = function() {
    game.game.input.enabled = false;
    this.chatInput.startFocus();
    this.chatInput.focus = true;
    this.chatInput.placeHolder.visible = false;
};

this.stopInput = function() {
    this.chatInput.endFocus();
    this.chatInput.focus = false;
    game.game.input.enabled = true;
};

Finally, I get the value when the enter key is pressed and clear the input using resetText()

in phaser 2.3.0 have error like this.

it work if i use phaser v2.6 + but i want to use v2.3.0 because i have some bug about velocity in version 2.6 +

can you help me ?

This is not an API bug per se, but it just weird for it not to be a native feature.

What I needed was to simply add a callback to endFocus of an inputField; problem is, from what I looked on the code, InputElement does have public signals:

public focusIn: Phaser.Signal = new Phaser.Signal(); public focusOut: Phaser.Signal = new Phaser.Signal();

But InputElement itself is a private element of InputElement, therefore hiding both signals from user access. My solution was to hardcode a callback using closures, as seen on this gist.

I think it would make more sense to expose both signals as events in the inputField object.

PS: I tried messing with the typescript code, but I'm a Grunt newbie and I couldn't build from source.

Is there a way to show the numeric keyboard on mobile devices but keep the type "password"? Or somehow only show the numbers as "*"?

I have rendered a mobile app for ios with https://www.ludei.com/cocoonjs/. On mobile browsers the keyboard will appear, but in the Cocoon-App the keyboard won't appear (input field has focus, cursor is blinking).

• tested with cocoon dev-app (Canvas+)
• Phaser v2.6.2
• phaser-input - version 2.0.1

Tested on

• iPad Air (MD785FD/A) / iOS 10.02
• iPhone 4S / iOS 9.3.5

when using nodejs + typescript + webpack, and in ts file:
import * as Fabrique from 'phaser-input/build/phaser-input';
when compile warnings and errors occurs:
solution:

1. add export = Fabrique; to phaser-input.d.ts
2. copy the ts folder to the phaser-input folder that installed in node-modules folder

Hi,

awesome library. Really curcial when needing an input field within phaser. However as soon as I add this inputfield as child to another sprite (background) the cursor disappears. I cannot provide any code since this is from a clients project but if you need a MWE let me know.

best regards
dasheck0

If i want to enter a text and i want to delete it, it works.
But its not showing correctly.
Also if i press the key to remove the text or to move the cursor to the left or to the right, then it only gets updated after i released the key.

Examples:
https://i.gyazo.com/243933420200a18fcbb2ae07e9314a5c.mp4 (phaser-input)
https://i.gyazo.com/dcd4ec9e41da57e96467a910a071f7c1.mp4 (html input)

(Version 2.0.3)

I hope your understand the problem. ^^
Sorry for my bad english :/

Hi folks, I've been tinkering with this plugin today using TypeScript, phaser-ce v2.8.0, using gulp as my build manager. I encountered a few issues along the way and thought I would detail my process, and/or see if there is a better way of doing this.

Accessing the module globally

Firstly I had to get the TypeScript compiler to make use of the definitions, as the PhaserInput module was not available to me. To do this, I:

1. Created node_modules/@orange-games/phaser-input/build/typings.json which contains:

{
    "name": "phaser-input",
    "main": "phaser-input.d.ts",
    "global": true
}

2. Modified ./typings.json, to add a phaser-input field to globalDevDependencies.
   The file now contains:

{
	"globalDevDependencies": {
		"phaser": "file:node_modules/phaser-ce/typescript/typings.json",
		"phaser-input": "file:node_modules/@orange-games/phaser-input/build/typings.json"
	}
}

3. Ran typings install in the project root directory

This allowed me to access the PhaserInput module globally.

Adding the plugin

Next up I was unable to add the plugin to the game, as I was getting this error:

Argument of type 'typeof Plugin' is not assignable to parameter of type 'Plugin'. Property 'active' is missing in type 'typeof Plugin'.

After a browse at some other plugins, I notice they use this method (which also works in this case)

this.game.add.plugin(new PhaserInput.Plugin(this.game, this.game.plugins));

Gaining access to game.add.inputField()

When trying to use the game.add.inputField() method I was getting the following error:

Property 'inputField' does not exist on type 'GameObjectFactory'.

To fix this I added the following member variable to the Phaser.State I am creating

export default class Menu extends Phaser.State {
	public game: PhaserInput.InputFieldGame; // Added

	public create() {
		const input = this.game.add.inputField(10, 10);
		// etc...
	}
}

As per title - is this a library-specific issue or something I could fix my end?

i want to use you plugin but how to clear the text ,i try set the input.value = "" , but that doesn't work

just start your example and got error:

Uncaught TypeError: Cannot read property 'update' of null
    at c.update (phaser-input.min.js:10)
    at c.World.c.Group.update (phaser.js:33716)
    at c.Stage.update (phaser.js:31820)
    at c.Game.updateLogic (phaser.js:36338)
    at c.Game.update (phaser.js:36280)
    at c.RequestAnimationFrame.updateRAF (phaser.js:61979)
    at window.requestAnimationFrame.forceSetTimeOut._onLoop (phaser.js:61962)

Sorry for the stupid request- but could you provide an example of using the .d.ts file? I cannot get the definitions to successfully merge with phaser.comments.d.ts (from Phaser proper).

I'm bundling my project with webpack and had to add:

module.exports = Fabrique;

at the end of the build/phaser-input.js in order to be able to import it into the project as a module. Is there a way you can add any type of export (amd, commonjs, ES6, ...) to the project?

Suppose a user types something into the input and then clicks a button. In the click handler for the button how can I read the current text value that was typed into the input? thanks!

Hi,

Thanks for the nice plugin. I am building a word scramble game with phaser and using input plugin. The plugin works nice on desktop and on android devices. But there are some serious performance issues on iPad2. Initially I tried creating several text input fields, but there are some performance issues on iPad2. So I tried creating a single text input field and tried moving it around. But the issue remains same.

Any tips on improving performance on iPad?

I created several inputs of varying widths, the last being a small width. All the inputs would then cut off the inputted text at the width of that small width input. If any input is larger in width than the last created input then it will be cut off at that width of the last created input.

This is not necessarily an issue but, just wasn't sure where else to raise it.

In CanvasInput you can set a value for the field, is this something you can achieve with phaser-input?

So when a text input field is created it is automatically populated with an existing value ( If one exists ). Is this something that can be achieved using JavaScript alone if the ability is unavailable in phaser-input?

Another use case where I'm putting x and y values in text inputs for a in-game map editor.

Phaser Input expects the text field to be selected and have a place holder. The following changing let me do what I want but not the best code. More of a workaround.

InputField.prototype.setText = function (text) {
    if (text === void 0) { text = ''; }
        if (this.placeHolder) {
            if (text.length > 0) {
                this.placeHolder.visible = false;
            }
            else {
                this.placeHolder.visible = true;
               }
            }
            this.value = text;
            this.domElement.value = this.value;
            this.updateText();
                try {
                    this.updateCursor();
                } catch(e) {}
            this.endFocus();
        };

This is a little trick I use to update a sprite via the inputs without events. This is outside the scope of this issue but interesting nonetheless.

this.update = function() {
    if (this.xInput.focus) {
        this.selectedItem.x = this.xInput.value;
    }
    if (this.yInput.focus) {
        this.selectedItem.y = this.yInput.value;
    }
}

I'm using Phaser v2.6.2 and Phaser input v.2.0.5

My game initialisation script:
var gameConfig = { "width": pallet.width, "height": pallet.height, "parent": 'game', "resolution": window.devicePixelRatio }; var game = new Phaser.Game(gameConfig)

My inputfield script:
playerEmail = game.add.inputField(inputbox_x, inputbox_y), { font: 24 * ratio + 'px Raleway', fill: '#000000', width: (game.width / 540) * 300, height: (game.height / 960) * (14 * ratio), padding: 8 * ratio, borderWidth: 1, borderColor: '#000', borderRadius: 6 * ratio, placeHolder: 'Email', forceCase: 'lower' });

Screenshoot 1 (https://ibb.co/nQTDDy) is the initial display when the state is begin.
Screenshoot 2 (https://ibb.co/gDYPLd) is when I typed less than 8 characters.
Screenshoot 3 (https://ibb.co/myHjLd) is when I typed more than 7 characters.

The problem is the text is going to right if I typed more than 7 characters (https://ibb.co/dXHUmJ). Is there any solution to this problem? Thanks before

Hi, I have a question is there a way to center the text inside of the input?
input {
text-align: center;
}

I did try textAlign : 'center'; it didn't work.

Thank you.

Hi,

When the text of an input is greater than its width, the caret is blocked to the right even if we move backward with Begin or ←. However, the "real" caret continues to move in it's DOM input and when we type, the text is displayed to the right position, but we don't see it if it's to the left of the field for example.

The InputField.prototype.updateCursor seems to be the bad guy if I understand it correctly (source here).

It's a bug, isn't it?

First, thank you for this great input box! I altered it a little bit to allow submitting to a callback upon pressing enter.

Anyway, I am trying to set the z-index of the component, but am having no effect. The text box goes over most of my game sprites, except for text that I have at a specific z-index.

How can I make sure that the text box is above everything?

Thank you

Hi,

i have the same problem of issue #19 . My game is not at top of the page; so, when i click on the input field, the page scroll to top and it is impossible to write on it.

I'm using phaser-input - version 2.0.5 .

Thank you for your support.

Hello,

I am using this phaser input plugin in my game, but it is not working on mobile devices/tablets? What could be be the problem?

https://github.com/orange-games/phaser-input

It is working fine on desktop, but when i tried on ipad and even on android mobile typing text is not happening.

This is the code-
//enable plugin for text input
game.add.plugin(PhaserInput.Plugin);

    //textfield
   var  name=game.add.inputField(200, 230, {
        font: '29px casual',
        fill: '#000',
        width: 380,
        padding: 10,
        borderWidth: 4,
        borderColor: '#169AC5',
        borderRadius: 20,
        placeHolder:'Name',
        placeHolderColor:'#00549C',
        textAlign:'center',
        type: PhaserInput.InputType.text

    });

Thanks in advance.

Hi there, I've been using your plugin for one of my projects, its really cool. Only problem I had was that I wanted to find a method that focuses on the element, couldn't find it in your docs, so went though the code and found that there is a method called, startFocus() which does what I needed to. Would be great for others if you updated your docs to include all the methods.

Hi, this library doesn't work in Microsoft Edge in fullscreen mode (after game.scale.startFullScreen(); in phaser).

I changed

this.element.style.top = (-100).toString() + 'px';

to

this.element.style.width = 0;
this.element.style.height = 0;
this.element.style.top = (100).toString() + 'px';

and it seemed to fix them problem of scrolling to the top of a page when an input gains focus.

I copied the non minimized version of the script in Aptana Studio 3 and turned on JSlint. I cannot execute my other code since this script breaks before it.

What did the author wanted to achieve with this code block:

var __extends = (this && this.__extends) || function (d, b) {'use strict';
    var p;

    for (p in b) {
        if (b.hasOwnProperty(p)) {
            d[p] = b[p];
        }
    }

    function __() { this.constructor = d; }
    d.prototype =
        b === null ?
        Object.create(b) :
        (__.prototype = b.prototype, new __()); // expected an operator and saw new
};

When I ran my game in Firefox I could see the DOM element used for the input in the upper left corner. I looked at the computed box model in the developer console and there was a border of 8px. I fixed it with simple CSS:

input {
    border: 0px;
}

I am not very experienced with HTML / CSS so I am not sure if a similar solution would fix the problem in all browsers and that it wouldn't introduce new ones. If you think it would be fine I can patch it and submit a PR (it's a few lines of code here). Also I would set padding to 0px as well just to be on the safe side.

Some technical details:

OS: Arch Linux
Firefox Version: 50.1.0 (should be the latest)
Plugin Version: 1.2.6 (from NPM) I am not using the latest version from the repo, but after a quick look at the source the issue doesn't seem to have been addressed.

I hope I haven't missed anything. I'd be happy to help you in any way I can.
Thanks for your time and attention.

When I add the inputField as a child to a sprite, the blinking cursor stops showing. Everything else working as expected.

I do that:

let nameInputOptions: any = { font: "18px Exo", fill: "#212121", fontWeight: "bold", width: 220, padding: 12, borderWidth: 1, borderColor: "#000", borderRadius: 8, placeHolder: "name", type: Fabrique.InputType.text };

this.nameInput = new Fabrique.InputField(this.game, - RegisteringContainer.INPUT_WIDTH / 2, 0, nameInputOptions); this.add(this.nameInput);

Hi,

I was just playing around with the library and was wondering how to implement tab between two input fields. Here is some code of mine (which does not work):

var tabKey = this.game.input.keyboard.addKey(Phaser.Keyboard.TAB);
            tabKey.onDown.add(this.focusNextInput, this);

focusNextInput: function () {
            console.log("Tab hit");
            if (this.currentFocus > -1) {
                var temp = [this.emailInput, this.passwordInput];
                temp[this.currentFocus].endFocus();

                this.currentFocus += 1;
                if (this.currentFocus >= temp.length) {
                    this.currentFocus = 0;
                }

                temp[this.currentFocus].startFocus();
            }
        }

The first tab does work and selects the input field but subsequent tabs do not work. They focus the browsers native buttons (back, reload button, etc...). Can anyone help?

EDIT: Also the debug log message is only printed on the first tab hit.

Best regards
dasheck

It could be usefull to change the value of input somewhere in the script.
In my case, I need to define the initial value after input creation.

There is method resetText, that has almost all functionality.

Is there an equivalent of text-transform: uppercase;?

I get the following error when I destroy the phaser group containing an input textfield by calling group.destroy(true, false);

_phaser-input.min.js:10 Uncaught TypeError: Cannot read property 'device' of null
c.endFocus @ phaser-input.min.js:10
c.setText @ phaser-input.min.js:10
c.resetText @ phaser-input.min.js:10
c.checkDown @ phaser-input.min.js:10
execute @ phaser.min.js:11
dispatch @ phaser.min.js:11
start @ phaser.min.js:12
onMouseDown @ phaser.min.js:12
onMouseDown @ phaser.min.js:12

for soft-keyboard in mobile autocomplete (suggested keyword) not appear in inputFeild till a keyup triggers

I dont know why, but i have different errors with phaser-input...
Box disappears, random text (previously entered) appears or other text objects are overwritten. :(

Examples:
https://i.gyazo.com/a7a481414841fef39eae7436deafdd98.mp4
https://i.gyazo.com/344463111ec03a1b7f6e143f05e05364.gif
https://i.gyazo.com/873ae3cf7295221999906da00985053f.mp4

It is totally random and cant reproduce it and i get no javascript errors... :(

It's worth to mention in read me that text for such input should be set only via "setText()" method. Otherwise, once stage gets any tap, contents of input is automatically erased (since dom input is empty). Also reading data from input should be done via "value" property.

Finally, it will be just couple of lines of code to add two more signals: onFocusIn and onFocusOut which developers could use to handle when user finished typing... as you do not trigger keyboard closed for desktop intentionally (which has no reason, unless you intentionally do not want people use your code).

Thanks

p.s. if you need, I can tell you where to make changes or even modify parser-input.js file. I can make pull requests if needed but I prefer native git repositories rather github

If I follow the documentation and enter something like the following code

this.pointInput = game.add.inputField(300, 300, {
  type: 'text',
  forceCase: 'upper',
  max: '6',
});

It doesn't force the upper case and it also doesn't limit the length of entered text to 6 charactes as expected. In order to let forceCase work, you need to enter forceCase: 2.

the max property works only with number fields properly. It doesn't limit the amount of characters in type: 'text' as I expected.