Recommendation for keyboard input with a nativeTextField?

I am working on a puzzle game app that will have “tiles” (currently newRect display objects in an array, but may switch to images instead) on which players will be able to type, one letter per tile. Looking for suggestions on how to handle on-screen keyboard input for this.

Here is what I anticipate needing to do this:

  • Setting the active tile for the keyboard input by a tap event and then triggering the on-screen keyboard to appear
  • On-screen keyboard input and logic to determine if it is a letter
  • Adding the letter typed to the tile (either another image or a text object)
  • Setting the active tile to the next tile after a letter is typed
  • Detecting the back key to go to the previous tile
  • Detecting the Enter/Return key to submit the answer
  • Logic to determine if the on-screen keyboard is blocking the tiles and repositioning the tiles accordingly

I had considered just creating tiles with letters on them already (basically, a draggable keyboard of tiles) and allowing players to drag them into place. But this feels like a non-intuitive way for players to enter words, so wanted to avoid that.

From the research I had done, it seemed the best way to handle this via mobile keyboard would be to have an off-screen nativeTextField and use change events to read the contents of the text field and replicate it with the tiles. The complication with that would be not being able to handle putting the keyboard cursor in the right place in the text field if the player clicked on a tile in the middle of typing.

Would love any suggestions from folks who might have done something like this on what recommended ways to handle this might be.


[Edited to better reflect what I meant by keyboard.]

iOS(recently added) and Android both support keyboards. I don’t think using off-screen nativeTextField is necessary.

Edit: I just updated docs with this information

Scott, I wasn’t referring to external keyboards. Sorry if that was confusing. I am just trying find the right way to handle the on-screen keyboard of a phone or tablet for this use case: where I am not creating and allowing input into a text field, but need to capture on-screen keyboard input.

Given the provided details, this reminds me of Wordle (or Wheel of Fortune), and that would probably be my approach – a “custom” onscreen keyboard. You would have full control and possibly less headaches across platforms.

Thanks, Siu. I was hoping not to do that just because I know how I’ve felt when playing other word games with their own custom keyboards, with my fingers never falling in the same place as I’m used to with that device’s keyboard. But I definitely do understand why it would be preferable, albeit more work.

Definitely need to give this some thought.

Thanks for your feedback here.

1 Like