This plugin for pixi.js provides a convenient way of adding text inputs to the pixijs-stage. The input itself is a HTML <input> element, which is positioned above the stage according to the transformation given by the PIXI-DisplayObject. The box is drawn on the PIXI-stage. Additionally, you can choose whether the plugin should substitute the <input> with a native pixi-Text when the textfield has no focus.

Demo with default box generator

Demo with custom box generator

The TextInput behaves just like any other PIXI-DisplayObject. It inherits from PIXI.Container and has all the associated properties like width, height, rotation, scale ,alpha, etc.

new PIXI.TextInput( input_style, box_styles )

input_style : object

The css style attributes for the HTML input tag.

box_styles : object | function

Either an object describing the style of the box using the default box generator, or a function which returns your own custom generated box.

You can apply any CSS styles. You have to use the camcelCase property names, though.

new PIXI.TextInput({
    fontSize: '25pt',
    padding: '14px',
    width: '500px',
    color: '#26272E'
}, {...})

If you plan to use more advanced properties like text-shadow, you will have to disable substituteText, as their translation to the pixi-Text style is not supported, yet.

The input can have 3 different states: DEFAULT, FOCUSED and DISABLED.

For each state you can apply a different style to the input-box. When passing the following object to the second parameter of the constructor...

new PIXI.TextInput({...}, {
    default: {fill: 0xE8E9F3, rounded: 16, stroke: {color: 0xCBCEE0, width: 4}},
    focused: {fill: 0xE1E3EE, rounded: 16, stroke: {color: 0xABAFC6, width: 4}},
    disabled: {fill: 0xDBDBDB, rounded: 16}
})

...you will get a box-style as shown in this demo.

If you don't want a different style for each state, you can just pass:

new PIXI.TextInput({...}, {fill: 0xE8E9F3, rounded: 16, stroke: {color: 0xCBCEE0, width: 4}})

and have the same style for all 3 states.

Write your own function to generate the box.

function generateCustomBox(width, height, state){
    var box = new PIXI.Graphics()

    // draw the box based on width, height and the state (DEFAULT, FOCUSED or DISABLED)

    return box
}

then use it as follows

 new PIXI.TextInput({...},generateCustomBox)

See this demo.

All described members & methods are accessible through a instance of the TextInput.

var input = new PIXI.TextInput({fontSize: '25pt'}, {fill: 0xEEEEEE})
input.x = 100
input.y = 100
input.placeholder = 'Enter your Text...'
stage.addChild(input)
input.focus()

substituteText : boolean

Whether the plugin should substitute the html input tag with a pixi-Text DisplayObject when there's no focus.

The plugin tries its best to mimic the exact look of the html input element, however with certain fonts/styles there might be some discrepancies.

Set this to false in order to have the html input element visible at all times. Drawback: You cannot have overlays over the input field.

placeholder : string

The placeholder text applied to the html input element or the substituted pixi-Text.

placeholderColor : int

The color of the placeholder (has no effect when substituteText is set to false; Use CSS to set the placeholder color).

text : string

The text (value) of the html input element.

disabled : boolean

Set to true to disable the input.

focus() : void

Focus the input.

setInputStyle( key : string, value : string ) : void

Change a css style attribute of the input element. For example, to change the font size, use:
input.setInputStyle('fontSize', '21pt')

Feel free to add features or suggest improvements.