Input text

Introduction

Input DOM element.

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('rexinputtextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexinputtextplugin.min.js', true);
    
  • Add input-text object
    var inputText = scene.add.rexInputText(x, y, width, height, config);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import InputTextPlugin from 'phaser3-rex-plugins/plugins/inputtext-plugin.js';
    var config = {
        parent: divId,
        dom: {
            createContainer: true
        },        
        // ...
        plugins: {
            global: [{
                key: 'rexInputTextPlugin',
                plugin: InputTextPlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Add input-text object
    var inputText = scene.add.rexInputText(x, y, width, height, 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 InputText from 'phaser3-rex-plugins/plugins/inputtext.js';
    
  • Add input-text object
    var inputText = new InputText(scene, x, y, width, height, config);
    scene.add.existing(inputText);
    

Add input text object

var inputText = scene.add.rexInputText(x, y, width, height, config);
// var inputText = scene.add.rexInputText(x, y, config);
// var inputText = scene.add.rexInputText(config);

Default configuration

{
    x: 0,
    y: 0,
    width: undefined,
    height: undefined,

    type: 'text',    // 'text'|'password'|'textarea'|'number'|'color'|...

    // Element properties
    id: undefined,
    text: undefined,
    placeholder: undefined,
    tooltip: undefined,
    readOnly: false,
    spellCheck: false,
    autoComplete: 'off',

    // Style properties
    align: undefined,
    paddingLeft: undefined,
    paddingRight: undefined,
    paddingTop: undefined,
    paddingBottom: undefined,
    fontFamily: undefined,
    fontSize: undefined,
    color: '#ffffff',
    border: 0,
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    outline: 'none',
}
  • x, y : Position
  • width, height : Size of element
  • type : Type of element
    • 'text', 'password', 'textarea', 'number', 'color', ...
  • Element properties
    • id : id element property.
    • text : value element property.
    • placeholder : placeholder element property.
    • tooltip : title element property.
    • readOnly : readonly element property.
    • spellCheck : spellcheck element property.
    • autoComplete : autocomplete element property.
  • Element style properties
    • align : text-align style property.
    • paddingLeft, paddingRight, paddingTop, paddingBottom : padding-left, padding-right, padding-top, padding-bottom style property.
    • fontFamily : font-family style property.
    • fontSize : font-size style property.
    • color : color style property.
    • backgroundColor : backgroundColor style property.
    • border, borderColor : border, borderColor style property.
    • outline : outline style property.

Custom class

  • Define class
    class MyText extends InputText {
        constructor(scene, x, y, width, height, config) {
            super(scene, x, y, width, height, config) {
            // ...
            scene.add.existing(this);
        }
        // ...
    
        // 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 inputText = new MyText(scene, x, y, width, height, config);
    

Text

  • Get
    var text = inputText.text;
    
  • Set
    inputText.setText(text);
    // inputText.text = text;
    
  • Select all text
    inputText.selectText();
    
  • Scroll to bottom
    inputText.scrollToBottom();
    

Style

  • Get
    var value = inputText.getStyle(key);
    
  • Set
    inputText.setStyle(key, value)
    

Focus

  • Focus
    inputText.setFocus();
    
  • Blur
    inputText.setBlur();
    

Resize

inputText.resize(width, height);

Events

  • On text changed
    inputText.on('textchange', function(inputText, e){ }, scope);
    
  • On focus
    inputText.on('focus', function(inputText, e){ }, scope);
    
  • On blur
    inputText.on('blur', function(inputText, e){ }, scope);
    
  • On click, double click
    inputText.on('click', function(inputText, e){ }, scope);
    
    inputText.on('dblclick', function(inputText, e){ }, scope);
    
    Touch/mouse events on input text object won't be propagated to game canvas.