Input

Defined in: ui/Input.ts:275

A highly customizable input component with mobile/touch support Input

Example

// Basic text input
const basicInput = new Input({
  minWidth: 400,
  placeholder: { text: 'Enter text' },
  padding: [12, 15]
});

// Password input with validation
const passwordInput = new Input({
  type: 'password',
  minWidth: 400,
  placeholder: { text: 'Enter password' },
  maxLength: 20,
  regex: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/
});

// Phone number input with validation
const phoneInput = new Input({
  type: 'tel',
  regex: /^1?-?\(?([2-9][0-9]{2})\)?[-. ]?([2-9][0-9]{2})[-. ]?([0-9]{4})$/,
  error: {
    input: { fill: 0xff0000 },
    bg: { fill: 0xf5e0df }
  }
});

Extends

• Container<Application<DataSchema, ActionContext, Action, Renderer>, this> & ISignalContainer & IInteractive & IFocusable<this>

Constructors

new Input()

new Input(options, isClone, clone): Input

Defined in: ui/Input.ts:356

Parameters

options

Partial<InputProps>

isClone

boolean = false

clone

null | Input

Returns

Input

Overrides

Focusable(Interactive(WithSignals(Container))).constructor

Properties

__dill_pixel_method_binding_root

__dill_pixel_method_binding_root: boolean = true

Defined in: display/Container.ts:61

Inherited from

Focusable(Interactive(WithSignals(Container))).__dill_pixel_method_binding_root

---

add

add: object

Defined in: mixins/factory/Factory.ts:6

animatedSprite()

animatedSprite: (props?) => AnimatedSprite

Parameters

props?

Partial<AnimatedSpriteProps>

Returns

AnimatedSprite

bitmapText()

bitmapText: (props?) => BitmapText

Parameters

props?

Partial<TextProps>

Returns

BitmapText

button()

button: (props?) => Button

Parameters

props?

Partial<ButtonProps>

Returns

Button

container()

container: (props?) => Container<Application<DataSchema, ActionContext, Action, Renderer>>

Parameters

props?

Partial<ContainerProps>

Returns

Container<Application<DataSchema, ActionContext, Action, Renderer>>

existing()

existing: <TEntity>(entity, props?) => TEntity

Type Parameters

• TEntity

Parameters

entity

TEntity

props?

Partial<ExistingProps>

Returns

TEntity

flexContainer()

flexContainer: (props?) => FlexContainer

Parameters

props?

Partial<FlexContainerProps>

Returns

FlexContainer

graphics()

graphics: (props?) => Graphics

Parameters

props?

Partial<GraphicsProps>

Returns

Graphics

htmlText()

htmlText: (props?) => HTMLText

Parameters

props?

Partial<HTMLTextProps>

Returns

HTMLText

particleContainer()

particleContainer: (props?) => ParticleContainer<Application<DataSchema, ActionContext, Action, Renderer>>

Parameters

props?

Partial<ParticleContainerProps>

Returns

ParticleContainer<Application<DataSchema, ActionContext, Action, Renderer>>

spine()

spine: (props?) => Spine

Parameters

props?

Partial<SpineProps>

Returns

Spine

spineAnimation()

spineAnimation: (props?) => SpineAnimation

Parameters

props?

Partial<SpineProps>

Returns

SpineAnimation

sprite()

sprite: (props?) => Sprite

Parameters

props?

Partial<SpriteProps>

Returns

Sprite

text()

text: (props?) => Text

Parameters

props?

Partial<TextProps>

Returns

Text

texture()

texture: (props?) => Texture = resolveTexture

Parameters

props?

Partial<TextureProps>

Returns

Texture

tilingSprite()

tilingSprite: (props?) => TilingSprite

Parameters

props?

Partial<TilingSpriteProps>

Returns

TilingSprite

toaster()

toaster: (toasterConfig?, defaultToastConfig) => Toaster

Parameters

toasterConfig?

Partial<ToasterConfig>

defaultToastConfig?

Partial<ToastConfig> = {}

Returns

Toaster

uiCanvas()

uiCanvas: (props?) => UICanvas

Parameters

props?

Partial<UICanvasFactoryProps>

Returns

UICanvas

svg()

Parameters

props

WithRequiredProps<SvgProps, "ctx">

Returns

Svg

Inherited from

Focusable(Interactive(WithSignals(Container))).add

---

bg

bg: Graphics

Defined in: ui/Input.ts:307

Background graphics container

---

caret

caret: Container

Defined in: ui/Input.ts:313

Caret (cursor) container

---

clone

clone: null | Input = null

Defined in: ui/Input.ts:359

---

error

error: boolean

Defined in: ui/Input.ts:331

Current error state

---

focusEnabled

focusEnabled: boolean

Defined in: plugins/focus/FocusManagerPlugin.ts:19

Inherited from

Focusable(Interactive(WithSignals(Container))).focusEnabled

---

input

input: Text

Defined in: ui/Input.ts:319

Text input container

---

isClone

isClone: boolean = false

Defined in: ui/Input.ts:358

---

isFocused

isFocused: boolean

Defined in: plugins/focus/FocusManagerPlugin.ts:17

Inherited from

Focusable(Interactive(WithSignals(Container))).isFocused

---

isKeyDown

isKeyDown: boolean

Defined in: plugins/focus/FocusManagerPlugin.ts:18

Inherited from

Focusable(Interactive(WithSignals(Container))).isKeyDown

---

make

make: object

Defined in: mixins/factory/Factory.ts:7

animatedSprite()

animatedSprite: (props?) => AnimatedSprite

Parameters

props?

Partial<AnimatedSpriteProps>

Returns

AnimatedSprite

bitmapText()

bitmapText: (props?) => BitmapText

Parameters

props?

Partial<TextProps>

Returns

BitmapText

button()

button: (props?) => Button

Parameters

props?

Partial<ButtonProps>

Returns

Button

container()

container: (props?) => Container<Application<DataSchema, ActionContext, Action, Renderer>>

Parameters

props?

Partial<ContainerProps>

Returns

Container<Application<DataSchema, ActionContext, Action, Renderer>>

existing()

existing: <TEntity>(entity, props?) => TEntity

Type Parameters

• TEntity

Parameters

entity

TEntity

props?

Partial<ExistingProps>

Returns

TEntity

flexContainer()

flexContainer: (props?) => FlexContainer

Parameters

props?

Partial<FlexContainerProps>

Returns

FlexContainer

graphics()

graphics: (props?) => Graphics

Parameters

props?

Partial<GraphicsProps>

Returns

Graphics

htmlText()

htmlText: (props?) => HTMLText

Parameters

props?

Partial<HTMLTextProps>

Returns

HTMLText

particleContainer()

particleContainer: (props?) => ParticleContainer<Application<DataSchema, ActionContext, Action, Renderer>>

Parameters

props?

Partial<ParticleContainerProps>

Returns

ParticleContainer<Application<DataSchema, ActionContext, Action, Renderer>>

spine()

spine: (props?) => Spine

Parameters

props?

Partial<SpineProps>

Returns

Spine

spineAnimation()

spineAnimation: (props?) => SpineAnimation

Parameters

props?

Partial<SpineProps>

Returns

SpineAnimation

sprite()

sprite: (props?) => Sprite

Parameters

props?

Partial<SpriteProps>

Returns

Sprite

text()

text: (props?) => Text

Parameters

props?

Partial<TextProps>

Returns

Text

texture()

texture: (props?) => Texture = resolveTexture

Parameters

props?

Partial<TextureProps>

Returns

Texture

tilingSprite()

tilingSprite: (props?) => TilingSprite

Parameters

props?

Partial<TilingSpriteProps>

Returns

TilingSprite

toaster()

toaster: (toasterConfig?, defaultToastConfig) => Toaster

Parameters

toasterConfig?

Partial<ToasterConfig>

defaultToastConfig?

Partial<ToastConfig> = {}

Returns

Toaster

uiCanvas()

uiCanvas: (props?) => UICanvas

Parameters

props?

Partial<UICanvasFactoryProps>

Returns

UICanvas

svg()

Parameters

props

WithRequiredProps<SvgProps, "ctx">

Returns

Svg

Inherited from

Focusable(Interactive(WithSignals(Container))).make

---

onAnimationComplete

onAnimationComplete: Signal<(entity) => void>

Defined in: mixins/animated.ts:21

Inherited from

Focusable(Interactive(WithSignals(Container))).onAnimationComplete

---

onAnimationStart

onAnimationStart: Signal<(entity) => void>

Defined in: mixins/animated.ts:19

Inherited from

Focusable(Interactive(WithSignals(Container))).onAnimationStart

---

onAnimationUpdate

onAnimationUpdate: Signal<(entity) => void>

Defined in: mixins/animated.ts:20

Inherited from

Focusable(Interactive(WithSignals(Container))).onAnimationUpdate

---

onBlur

onBlur: Signal<(focusable) => void>

Defined in: plugins/focus/FocusManagerPlugin.ts:35

Inherited from

Focusable(Interactive(WithSignals(Container))).onBlur

---

onDestroy

onDestroy: Signal<() => void>

Defined in: display/Container.ts:60

Inherited from

Focusable(Interactive(WithSignals(Container))).onDestroy

---

onFocus

onFocus: Signal<(focusable) => void>

Defined in: plugins/focus/FocusManagerPlugin.ts:34

Inherited from

Focusable(Interactive(WithSignals(Container))).onFocus

---

onFocusIn

onFocusIn: Signal<(focusable) => void>

Defined in: plugins/focus/FocusManagerPlugin.ts:32

Inherited from

Focusable(Interactive(WithSignals(Container))).onFocusIn

---

onFocusOut

onFocusOut: Signal<(focusable) => void>

Defined in: plugins/focus/FocusManagerPlugin.ts:33

Inherited from

Focusable(Interactive(WithSignals(Container))).onFocusOut

---

onInteraction()

onInteraction: (eventName) => InteractionSignal

Defined in: mixins/interaction.ts:16

Parameters

eventName

keyof FederatedEventMap | keyof GlobalFederatedEventMap

Returns

InteractionSignal

Inherited from

Focusable(Interactive(WithSignals(Container))).onInteraction

---

options

options: InputOptions

Defined in: ui/Input.ts:301

Input configuration options

---

placeholder

placeholder: Text

Defined in: ui/Input.ts:325

Placeholder text container

---

signalConnections

signalConnections: SignalConnections

Defined in: mixins/signals.ts:9

Inherited from

Focusable(Interactive(WithSignals(Container))).signalConnections

Accessors

app

Get Signature

get app(): A

Defined in: display/Container.ts:82

Get the application instance.

Returns

A

Inherited from

Focusable(Interactive(WithSignals(Container))).app

---

caretPosition

Get Signature

get caretPosition(): number

Defined in: ui/Input.ts:427

Gets the current caret (cursor) position

Returns

number

The caret position in pixels from the left

---

isValid

Get Signature

get isValid(): boolean

Defined in: ui/Input.ts:453

Gets whether the current input value is valid

Returns

boolean

True if the input is valid

---

regex

Set Signature

set regex(value): void

Defined in: ui/Input.ts:444

Sets the validation regex

Parameters

value

RegExp

The regular expression to use for validation

Returns

void

---

selectionRect

Get Signature

get selectionRect(): null | Rectangle

Defined in: ui/Input.ts:436

Gets the current selection rectangle

Returns

null | Rectangle

The selection rectangle or null if no selection

---

value

Get Signature

get value(): string

Defined in: ui/Input.ts:474

Gets the current input value

Returns

string

The current value

Set Signature

set value(value): void

Defined in: ui/Input.ts:482

Sets the input value

Parameters

value

string

The value to set

Returns

void

Methods

_checkPointerDownOutside()

_checkPointerDownOutside(e): void

Defined in: ui/Input.ts:573

Parameters

e

FederatedPointerEvent

Returns

void

---

_focusDomElement()

_focusDomElement(selection?): void

Defined in: ui/Input.ts:550

Parameters

selection?

number

Returns

void

---

_triggerFocusAndSelection()

_triggerFocusAndSelection(selection?): void

Defined in: ui/Input.ts:556

Parameters

selection?

number

Returns

void

---

addColoredBackground()

addColoredBackground(colorOrConfig, alpha): Sprite

Defined in: display/Container.ts:86

Parameters

colorOrConfig

number | Partial<BackgroundConfig>

alpha

number = 1

Returns

Sprite

Inherited from

Focusable(Interactive(WithSignals(Container))).addColoredBackground

---

added()

added(): void

Defined in: ui/Input.ts:518

Called when the component is added to the display list Shows the cursor if this is a clone

Returns

void

Overrides

Focusable(Interactive(WithSignals(Container))).added

---

addSignalConnection()

addSignalConnection(…args): void

Defined in: mixins/signals.ts:13

Parameters

args

…SignalConnection[]

Returns

void

Inherited from

Focusable(Interactive(WithSignals(Container))).addSignalConnection

---

animate()

animate(animationProps, instance?): Tween

Defined in: mixins/animated.ts:23

Parameters

animationProps

GSAPAnimationConfigExtended

instance?

any

Returns

Tween

Inherited from

Focusable(Interactive(WithSignals(Container))).animate

---

animateFrom()

animateFrom(animationProps, instance?): Tween

Defined in: mixins/animated.ts:25

Parameters

animationProps

GSAPAnimationConfigExtended

instance?

any

Returns

Tween

Inherited from

Focusable(Interactive(WithSignals(Container))).animateFrom

---

animateFromTo()

animateFromTo(fromProps, toProps, instance?): Tween

Defined in: mixins/animated.ts:27

Parameters

fromProps

GSAPAnimationConfigExtended

toProps

GSAPAnimationConfigExtended

instance?

any

Returns

Tween

Inherited from

Focusable(Interactive(WithSignals(Container))).animateFromTo

---

animateSequence()

animateSequence(sequences, instance?): Timeline

Defined in: mixins/animated.ts:33

Parameters

sequences

GSAPAnimationConfigExtended[]

instance?

any

Returns

Timeline

Inherited from

Focusable(Interactive(WithSignals(Container))).animateSequence

---

blur()

blur(): void

Defined in: plugins/focus/FocusManagerPlugin.ts:43

Returns

void

Inherited from

Focusable(Interactive(WithSignals(Container))).blur

---

bob()

bob(config?, instance?): Tween

Defined in: mixins/animated.ts:50

Parameters

config?

duration?

number

intensity?

number

instance?

any

Returns

Tween

Inherited from

Focusable(Interactive(WithSignals(Container))).bob

---

click()

click(): void

Defined in: plugins/focus/FocusManagerPlugin.ts:41

Returns

void

Inherited from

Focusable(Interactive(WithSignals(Container))).click

---

connectAction()

connectAction(…args): void

Defined in: mixins/signals.ts:15

Parameters

args

…SignalConnection[]

Returns

void

Inherited from

Focusable(Interactive(WithSignals(Container))).connectAction

---

connectSignal()

connectSignal(…args): void

Defined in: mixins/signals.ts:14

Parameters

args

…SignalConnection[]

Returns

void

Inherited from

Focusable(Interactive(WithSignals(Container))).connectSignal

---

destroy()

destroy(): void

Defined in: ui/Input.ts:812

Returns

void

Overrides

Focusable(Interactive(WithSignals(Container))).destroy

---

destroyAnimations()

destroyAnimations(): void

Defined in: mixins/animated.ts:39

Returns

void

Inherited from

Focusable(Interactive(WithSignals(Container))).destroyAnimations

---

drawBg()

drawBg(width, height): void

Defined in: ui/Input.ts:796

Parameters

width

number = ...

height

number = ...

Returns

void

---

drawSelection()

drawSelection(): void

Defined in: ui/Input.ts:784

Returns

void

---

focusIn()

focusIn(): void

Defined in: ui/Input.ts:546

Focuses the input Creates the DOM element and shows the cursor

Returns

void

Overrides

Focusable(Interactive(WithSignals(Container))).focusIn

---

focusOut()

focusOut(): void

Defined in: ui/Input.ts:586

Blurs (unfocuses) the input Removes the DOM element and hides the cursor

Returns

void

Overrides

Focusable(Interactive(WithSignals(Container))).focusOut

---

getFocusArea()

getFocusArea(): Bounds

Defined in: ui/Input.ts:1229

Gets the focusable area bounds

Returns

Bounds

The bounds of the input container

Overrides

Focusable(Interactive(WithSignals(Container))).getFocusArea

---

getFocusPosition()

getFocusPosition(): null | PointLike

Defined in: plugins/focus/FocusManagerPlugin.ts:49

Returns

null | PointLike

Inherited from

Focusable(Interactive(WithSignals(Container))).getFocusPosition

---

getFocusSize()

getFocusSize(): null | PointLike

Defined in: plugins/focus/FocusManagerPlugin.ts:51

Returns

null | PointLike

Inherited from

Focusable(Interactive(WithSignals(Container))).getFocusSize

---

handleClick()

handleClick(e?): void

Defined in: ui/Input.ts:530

Handles click/tap events on the input Creates the DOM element and positions the caret

Parameters

e?

FederatedEvent<UIEvent | PixiTouch>

The pointer event

Returns

void

---

isAnimationPlaying()

isAnimationPlaying(): boolean

Defined in: mixins/animated.ts:43

Returns

boolean

Inherited from

Focusable(Interactive(WithSignals(Container))).isAnimationPlaying

---

pauseAnimations()

pauseAnimations(): void

Defined in: mixins/animated.ts:35

Returns

void

Inherited from

Focusable(Interactive(WithSignals(Container))).pauseAnimations

---

pulse()

pulse(config?, instance?): Tween

Defined in: mixins/animated.ts:48

Parameters

config?

duration?

number

intensity?

number

times?

number

instance?

any

Returns

Tween

Inherited from

Focusable(Interactive(WithSignals(Container))).pulse

---

removed()

removed(): void

Defined in: display/Container.ts:155

Returns

void

Inherited from

Focusable(Interactive(WithSignals(Container))).removed

---

resetBg()

resetBg(): void

Defined in: ui/Input.ts:510

Redraws the background graphics

Returns

void

---

resize()

resize(): void

Defined in: ui/Input.ts:500

Resizes the input component Updates the clone overlay position if it exists

Returns

void

Overrides

Focusable(Interactive(WithSignals(Container))).resize

---

resumeAnimations()

resumeAnimations(): void

Defined in: mixins/animated.ts:37

Returns

void

Inherited from

Focusable(Interactive(WithSignals(Container))).resumeAnimations

---

reverseAnimation()

reverseAnimation(): void

Defined in: mixins/animated.ts:41

Returns

void

Inherited from

Focusable(Interactive(WithSignals(Container))).reverseAnimation

---

shake()

shake(config?, instance?): Tween

Defined in: mixins/animated.ts:46

Parameters

config?

duration?

number

intensity?

number

times?

number

instance?

any

Returns

Tween

Inherited from

Focusable(Interactive(WithSignals(Container))).shake

---

update()

update(): void

Defined in: ui/Input.ts:590

Update the container. This method is meant to be overridden by subclasses.

Returns

void

Overrides

Focusable(Interactive(WithSignals(Container))).update

Events

onChange

onChange: Signal<(detail) => void>

Defined in: ui/Input.ts:288

Emitted when the input value changes onChange

---

onEnter

onEnter: Signal<(detail) => void>

Defined in: ui/Input.ts:281

Emitted when the Enter key is pressed onEnter

---

onError

onError: Signal<(detail) => void>

Defined in: ui/Input.ts:295

Emitted when validation fails onError