Hidden edit

Introduction¶

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

Inspirited from CanvasInput.

Author: Rex
DOM Game object

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.