Input Plugin not working on mobile devices-

[madanteena]

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.

[AleBles]

For me this works on my android with Chrome v60.0.3112.116, Next week I should be able to check iOS too, but also your code works fine for me when I added it to the example, do you happen to use some form of scaling that might disturb the default hit area of the elements?
Does the keyboard appear? or does the input field just stay empty after typing.

[madanteena]

Hello,

I have tested this on ipad with Chrome v40.0.2214.73 and it is not working, problem is- text box is appearing and if i click on it keyboard also appears, but when we start typing nothing is typing. No am not doing any scaling.

[AleBles]

This one: http://fbrq.io/phaser-input/example/ worked fine for me on both Chrome and Safari on iPhone 6, how is that for you?

[SunilRumbaLama]

hello i am using phaser-input but it is giving me this error while testing on mobile, this.element.blur is not a function. Also on desktop the value is not coming from the input field :(

[madanteena]

Hello Sunil,

Instead of using phaser input box. Try this-
https://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input

[SunilRumbaLama]

@madanteena noob here, how do i get it working in a particular state? like adding the elements programatically in phaser

[VasilikiLoukoumi]

@AleBles This one ( http://fbrq.io/phaser-input/example/ ) does work on mobile. Could it be possible that this is due to the other phaser plugin involved (Phaser Nineslice) ?

[AleBles]

@VasilikiLoukoumi which version of Phaser are you using?

[VasilikiLoukoumi]

@AleBles I am using Phaser v2.10.0.

[AleBles]

I think the issue here is that this plugin doesn't work correctly with phaser-ce, I've been only using it together with phaser 2.6.2.

With phaser 3 released this week I also have no intention making it work with phaser-ce as well. I do accept PR's if someone is willing to investigate/fix.

[VasilikiLoukoumi]

It works if you put this meta tag on your html file, <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, width=device-width" />
!!

[PonyOny]

I'm having the same issue, using "phaser-ce" if I click the input on mobile (android/iPhone) the keyboard pops upa and hides immediately, the input looses focus directly after clicking, if i hold my finger down on the input for some seconds then the keyboard stays open and you can input values as the focus is not lost, but this is not acceptable for users to input values having to wait until the keyboard stays fix.

[ShahwarNisar]

I'm having the same issue, using "phaser-ce" if I click the input on mobile (android/iPhone) the keyboard pops upa and hides immediately, the input looses focus directly after clicking, if i hold my finger down on the input for some seconds then the keyboard stays open and you can input values as the focus is not lost, but this is not acceptable for users to input values having to wait until the keyboard stays fix.

Hi @PonyOny
Have you got any solution for it?

[martijn80]

Can confirm this since Safari 14.1 (released may 2021). The on screen keyboard on devices with no fysical keyboard, no longer pops up.

A workaround is to show a button outside the canvas and add an onclick that puts focus on the hidden textfield. Clicking it will pop up the onscreen keyboard and text input works. This isn't a workaround when you have multiple text inputs in your game unfortunately.

<button onclick="$('input').focus();">Focus Keyboard</button>

Is anybody willing to help to fix this bug for phaser-ce (specifically v2.10.6), I'm willing to sponsor. cc @AleBles