pixi-text-input-plus v1.0.27

PIXI.TextInput - Plugin for pixi.js

This plugin is based on mwni.io TextInput PIXI plugin.

I introduce: - the input type password
- the notion of rules to validate an input and the box colorization on blur. - d.ts file.

Some validation rules are already integrated: - required - email - number - string - min:{number} (min:3)

And if it's not enough you can set your own validator!

Installing

Created with PIXI v5.3.9.

npm i -S pixi-text-input-plus

Usage

import * as PIXI from 'pixi.js';
import 'pixi-text-input-plus';

const input = PIXI.TextInput({
    input: {
        fontFamily: 'Arial',
        fontSize: '36px',
        padding: '12px',
        width: '500px',
        color: '#26272E',
        type: 'password', // 'text' by default
    },
    box: {
        error: {fill: 0xE8E9F3, rounded: 12, stroke: {color: 0xFF0000, width: 3}},
        valid: {fill: 0xE8E9F3, rounded: 12, stroke: {color: 0x00FF00, width: 3}},
        default: {fill: 0xE8E9F3, rounded: 12, stroke: {color: 0xCBCEE0, width: 3}},
        focused: {fill: 0xE1E3EE, rounded: 12, stroke: {color: 0xABAFC6, width: 3}},
        disabled: {fill: 0xDBDBDB, rounded: 12}
    },
    rules: [
        {
            type: 'required',
            onError: function() {
                // What you want on error
                console.log('input required');
            }
        },
        {
            type: 'min:3',
            onError: function() {
                // What you want on error
                console.log('input min 3 chars');
            }
        },
        {
            type: 'regexp',
            validate: function(value) {
                return value === 'password';
            },
            onError: function() {
                // What you want on error
                console.log('it must be entered password');
            }
        },
    ]
});