Jump to content

Phaser Input plugin - hitting ENTER doesn't call function


pebb
 Share

Recommended Posts

I'm using PhaserInput plugin[1] to make an input box, but when I hit ENTER it doesn't call my function.

Here's the code in my `create()` function

input1 = game.add.inputField(10, 150, {
    font: '18px Arial',
    fill: '#212121',
    fontWeight: 'bold',
    width: 150,
    padding: 8,
    borderWidth: 1,
    borderColor: '#000',
    borderRadius: 6,
    placeHolder: 'Type and press enter',
    type: PhaserInput.InputType.text,
    focusOutOnEnter: false,
    blockInput: false
});

input1.startFocus();

enterKey = game.input.keyboard.addKey(Phaser.Keyboard.ENTER);
enterKey.onDown.add(sayHello, game);

 

Also, here's the sandbox :  http://phaser.io/sandbox/edit/UZDMKRKt

[1] https://github.com/orange-games/phaser-input

Link to comment
Share on other sites

Ok, I was able to get it to recognize a press ENTER event, but after I enter input I am not able to refocus on the input to type some more.

I want to automatically clear the input and refocus on it so I can type more text. Here's the code:


 

function sayHello(event) {
    //event.preventDefault();
    if (event.keyCode === 13) {
        console.log('you pressed enter!');
        console.log("your text:" + input1.value);
        input1.setText('');
        input1.endFocus();
        input1.startFocus();
        
    }
}

function create() {

    var sprite = game.add.sprite(0, 0, 'dude');

    input1 = game.add.inputField(10, 150, {
      font: '18px Arial',
      fill: '#212121',
      fontWeight: 'bold',
      width: 150,
      padding: 8,
      borderWidth: 1,
      borderColor: '#000',
      borderRadius: 6,
      placeHolder: 'Type and press enter',
      type: PhaserInput.InputType.text,
      focusOutOnEnter: true,
      blockInput:  true
});

    input1.startFocus();
   input1.domElement.element.addEventListener('keydown', sayHello.bind(game));

}

Here's the sandbox: http://phaser.io/sandbox/edit/SWiOEouu

Link to comment
Share on other sites

I got it working. I had to override the keyListener function.

 


function myListener(evt) {
            this.value = this.getFormattedText(this.domElement.value);
            
            // 13 is enter
           if (evt.keyCode === 13) {
                console.log("Your text: " + this.value);
                this.resetText();
                this.endFocus();
                this.startFocus();
                return;
            }
            
            this.updateText();
            this.updateCursor();
            this.updateSelection();
            evt.preventDefault();
        };
function create() {
 
    input1 = game.add.inputField(10, 150, {
    font: '18px Arial',
    fill: '#212121',
    fontWeight: 'bold',
    width: 150,
    padding: 8,
    borderWidth: 1,
    borderColor: '#000',
    borderRadius: 6,
    placeHolder: 'Type and press enter',
    type: PhaserInput.InputType.text,
    focusOutOnEnter: true,
    blockInput: true
});

    input1.startFocus();

   input1.keyListener = myListener;

}

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...