Skip to content

Hidden edit

Introduction

An invisible Input DOM element to receive character input and display on text, bbocodetext, or tagtext.

Inspirited from CanvasInput.

Live demos

Usage

Sample code

Install plugin

Load minify file

  • Enable dom element in configuration of game
    var config = {
        parent: divId,
        dom: {
            createContainer: true
        },        
        // ...
    };
    var game = new Phaser.Game(config);
    
    • Set parent to divId
    • Set dom.createContainer to true.
  • Load plugin (minify file) in preload stage
    scene.load.plugin('rexhiddeninputtextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexhiddeninputtextplugin.min.js', true);
    
  • Add input-text object
    var hiddenInputText = scene.plugins.get('rexhiddeninputtextplugin').add(textGameObject, config);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import HiddenInputTextPlugin from 'phaser3-rex-plugins/plugins/hiddeninputtext-plugin.js';
    var config = {
        parent: divId,
        dom: {
            createContainer: true
        },        
        // ...
        plugins: {
            global: [{
                key: 'rexHiddenInputTextPlugin',
                plugin: HiddenInputTextPlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Add input-text object
    var hiddenInputText = scene.plugins.get('rexHiddenInputTextPlugin').add(textGameObject, config);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Enable dom element in configuration of game
    var config = {
        parent: divId,
        dom: {
            createContainer: true
        },        
        // ...
    };
    var game = new Phaser.Game(config);
    
    • Set parent to divId
    • Set dom.createContainer to true.
  • Import class
    import HiddenInputText from 'phaser3-rex-plugins/plugins/hiddeninputtext.js';
    
  • Add input-text object
    var hiddenInputText = new HiddenInputText(textGameObject, config);
    

Note

Don't add this game object into scene

Add input text object

var hiddenInputText = scene.plugins.get('rexHiddenInputTextPlugin').add(textGameObject, {
    type: 'text',    // 'text'|'password'|'textarea'|...

    cursor: '|',
    cursorFlashDuration: 1000,

    // updateTextCallback: undefined,
    // updateTextCallbackScope: undefined,

    // enterClose: true,

    // onOpen: undefined,
    // onClose: undefined,
    // onUpdate: undefined,
});
  • textGameObject :
  • type : Type of element
    • 'text', 'password', 'textarea', ...
  • cursor : Cursor character used in default update text callback.
    • null, or '' : Don't insert cursor character.
  • cursorFlashDuration : Display cursor character or a space string to create a flash cursor.
  • enterClose : Set true to close input text when enter-key was pressed. Default value is true.
  • onOpen : Callback invoked when focus on this hidden input text.
    function (textObject, hiddenInputText) {
    }
    
  • onClose : Callback invoked when blur.
    function (textObject, hiddenInputText) {
    }
    
  • onUpdate :
    • A callback invoked in each tick of editing.
      function (text, textObject, hiddenInputText) {
          // return text;
      }
      
      • Can return a new string for text game object displaying.
    • 'number' : Only output number string.

Note

This hiddenInputText will be destroyed when textGameObject is destroyed.

Custom class

  • Define class
    class MyHiddenText extends HiddenInputText {
        constructor(textGameObject, config) {
            super(textGameObject, config) {
            // ...            
        }
        // ...
    
        // preUpdate(time, delta) {}
    }
    
    • scene.add.existing(gameObject) : Adds an existing Game Object to this Scene.
      • If the Game Object renders, it will be added to the Display List.
      • If it has a preUpdate method, it will be added to the Update List.
  • Create instance
    var hiddenInputText = new MyHiddenText(textGameObject, config);
    

Cursor

  • Set
    hiddenInputText.setCursor(s);
    
  • Get
    var cursor = hiddenInputText.cursor;
    

Open editor

hiddenInputText.open();

Equal to hiddenInputText.setFocus()

Close editor

hiddenInputText.close();

Equal to hiddenInputText.setBlur();

Is opened

var isOpened = hiddenInputText.isOpened;

Equal to hiddenInputText.isFocused

Select text

This feature does not support.

Events

See InputText/Event

Other properties

See InputText, DOM game object.