API
API|
@babylonjs/gui|
InputText

Class InputText

Class used to create input text control

Hierarchy (View Summary)

Index
constructor
animations disableMobilePrompt hoverCursor isFocusInvisible isHitTestVisible isPointerBlocker isSerializable metadata name? onAccessibilityTagChangedObservable onAfterDrawObservable onBeforeDrawObservable onBeforeKeyAddObservable onBlurObservable onDirtyObservable onDisposeObservable onEnabledStateChangedObservable onEnterPressedObservable onFocusObservable onIsVisibleChangedObservable onKeyboardEventProcessedObservable onPointerClickObservable onPointerDownObservable onPointerEnterObservable onPointerMoveObservable onPointerOutObservable onPointerUpObservable onTextChangedObservable onTextCopyObservable onTextCutObservable onTextHighlightObservable onTextPasteObservable onWheelObservable overlapDeltaMultiplier? overlapGroup? parent promptMessage tabIndex uniqueId useBitmapCache AddHeader AllowAlphaInheritance
accessibilityTag addKey alpha autoStretchWidth background centerX centerY clipChildren clipContent color currentKey deadKey descendantsOnlyPadding disabledColor disabledColorItem fixedRatio fixedRatioMasterIsWidth flexGrow flexShrink focusedBackground focusedColor fontFamily fontOffset fontSize fontSizeInPixels fontStyle fontWeight gradient height heightInPixels highligherOpacity highlightColor highlightedText highlighterOpacity highlightLineWidth horizontalAlignment host isDirty isEnabled isHighlighted isReadOnly isVisible left leftInPixels linkedMesh linkOffsetX linkOffsetXInPixels linkOffsetY linkOffsetYInPixels margin marginInPixels maxWidth maxWidthInPixels notRenderable onFocusSelectAll outlineColor outlineWidth paddingBottom paddingBottomInPixels paddingLeft paddingLeftInPixels paddingRight paddingRightInPixels paddingTop paddingTopInPixels placeholderColor placeholderText rotation scaleX scaleY shadowBlur shadowColor shadowOffsetX shadowOffsetY style text textHighlightColor thickness top topInPixels transformCenterX transformCenterY transformedMeasure typeName verticalAlignment width widthInPixels zIndex HORIZONTAL_ALIGNMENT_CENTER HORIZONTAL_ALIGNMENT_LEFT HORIZONTAL_ALIGNMENT_RIGHT VERTICAL_ALIGNMENT_BOTTOM VERTICAL_ALIGNMENT_CENTER VERTICAL_ALIGNMENT_TOP
_onPointerPick blur clone contains dispose focus getAscendantOfClass getClassName getDescendants getDescendantsToRef getDimension getLocalCoordinates getLocalCoordinatesToRef getParentLocalCoordinates isAscendant isDimensionFullyDefined isReady keepsFocusWith linkWithMesh markAllAsDirty markAsDirty moveToVector3 parse processKeyboard selectAllText serialize setPadding setPaddingInPixels Parse
animations: Nullable<Animation[]> = null

Array of animations

disableMobilePrompt: boolean = false

Force disable prompt on mobile device

hoverCursor: string = ""

Gets or sets the cursor to use when the control is hovered

isFocusInvisible: boolean = false

Gets or sets a boolean indicating if the control can be focusable

isHitTestVisible: boolean = true

Gets or sets a boolean indicating if the control can be hit with pointer events

isPointerBlocker: boolean = false

Gets or sets a boolean indicating if the control can block pointer events. False by default except on the following controls:

  • Button controls (Button, RadioButton, ToggleButton)
  • Checkbox
  • ColorPicker
  • InputText
  • Slider
isSerializable: boolean = true

Indicates if the control should be serialized. Defaults to true.

metadata: any = null

Gets or sets an object used to store user defined information for the node

name?: string

defines the control name

onAccessibilityTagChangedObservable: any = ...

Observable that fires whenever the accessibility event of the control has changed

onAfterDrawObservable: any = ...

An event triggered after the control was drawn

onBeforeDrawObservable: any = ...

An event triggered before drawing the control

onBeforeKeyAddObservable: any = ...

Observable raised just before an entered character is to be added

onBlurObservable: any = ...

Observable raised when the control loses the focus

onDirtyObservable: any = ...

An event triggered when the control is marked as dirty

onDisposeObservable: any = ...

An event triggered when the control has been disposed

onEnabledStateChangedObservable: any = ...

Observable that fires when the control's enabled state changes

onEnterPressedObservable: any = ...

An event triggered when a control receives an ENTER key down event

onFocusObservable: any = ...

Observable raised when the control gets the focus

onIsVisibleChangedObservable: any = ...

An event triggered when the control isVisible is changed

onKeyboardEventProcessedObservable: any = ...

Observable raised when a key event was processed

onPointerClickObservable: any = ...

An event triggered when a control is clicked on

onPointerDownObservable: any = ...

An event triggered when the pointer taps the control

onPointerEnterObservable: any = ...

An event triggered when pointer enters the control

onPointerMoveObservable: any = ...

An event triggered when the pointer moves over the control.

onPointerOutObservable: any = ...

An event triggered when the pointer moves out of the control.

onPointerUpObservable: any = ...

An event triggered when pointer up

onTextChangedObservable: any = ...

Observable raised when the text changes

onTextCopyObservable: any = ...

Observable raised when copy event is triggered

onTextCutObservable: any = ...

Observable raised when cut event is triggered

onTextHighlightObservable: any = ...

Observable raised when the text is highlighted

onTextPasteObservable: any = ...

Observable raised when paste event is triggered

onWheelObservable: any = ...

An event triggered when pointer wheel is scrolled

overlapDeltaMultiplier?: number

Gets/sets the deoverlap movement multiplier

overlapGroup?: number

Gets/sets the overlap group of the control. Controls with overlapGroup set to a number can be deoverlapped. Controls with overlapGroup set to undefined are not deoverlapped.

https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#deoverlapping

parent: Nullable<Container>

Gets or sets the control parent

promptMessage: string = "Please enter text:"

Gets or sets a string representing the message displayed on mobile when the control gets the focus

tabIndex: number = -1

The tab index of this control. -1 indicates this control is not part of the tab navigation. A positive value indicates the order of the control in the tab navigation. A value of 0 indicated the control will be focused after all controls with a positive index. More than one control can have the same tab index and the navigation would then go through all controls with the same value in an order defined by the layout or the hierarchy. The value can be changed at any time.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

uniqueId: number

Gets or sets the unique id of the node. Please note that this number will be updated when the control is added to a container

useBitmapCache: boolean = false

Gets or sets a boolean indicating that the current control should cache its rendering (useful when the control does not change often)

AddHeader: (
    control: Control,
    text: string,
    size: string | number,
    options: { controlFirst: boolean; isHorizontal: boolean },
) => any = ...
AllowAlphaInheritance: boolean = false

Gets or sets a boolean indicating if alpha must be an inherited value (false by default)

  • get accessibilityTag(): Nullable<IAccessibilityTag>

    Returns Nullable<IAccessibilityTag>

  • set accessibilityTag(value: Nullable<IAccessibilityTag>): void

    Gets or sets the accessibility tag to describe the control for accessibility purpose. By default, GUI controls already indicate accessibility info, but one can override the info using this tag.

    Parameters

    • value: Nullable<IAccessibilityTag>

    Returns void

  • get clipChildren(): boolean

    Returns boolean

  • set clipChildren(value: boolean): void

    Sets/Gets a boolean indicating if the children are clipped to the current control bounds. Please note that not clipping children may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children

    Parameters

    • value: boolean

    Returns void

  • get clipContent(): boolean

    Returns boolean

  • set clipContent(value: boolean): void

    Sets/Gets a boolean indicating that control content must be clipped Please note that not clipping content may generate issues with adt.useInvalidateRectOptimization so it is recommended to turn this optimization off if you want to use unclipped children

    Parameters

    • value: boolean

    Returns void

  • get descendantsOnlyPadding(): boolean

    Gets or sets a value indicating the padding should work like in CSS. Basically, it will add the padding amount on each side of the parent control for its children.

    Returns boolean

  • set descendantsOnlyPadding(value: boolean): void

    Parameters

    • value: boolean

    Returns void

  • get fixedRatio(): number

    Gets or sets a fixed ratio for this control. When different from 0, the ratio is used to compute the "second" dimension. The first dimension used in the computation is the last one set (by setting width / widthInPixels or height / heightInPixels), and the second dimension is computed as first dimension * fixedRatio

    Returns number

  • set fixedRatio(value: number): void

    Parameters

    • value: number

    Returns void

  • get fixedRatioMasterIsWidth(): boolean

    Gets or sets a boolean indicating that the fixed ratio is set on the width instead of the height. True by default. When the height of a control is set, this property is changed to false.

    Returns boolean

  • set fixedRatioMasterIsWidth(value: boolean): void

    Parameters

    • value: boolean

    Returns void

  • get fontOffset(): { ascent: number; descent: number; height: number }

    Gets or set information about font offsets (used to render and align text)

    Returns { ascent: number; descent: number; height: number }

  • set fontOffset(
        offset: { ascent: number; descent: number; height: number },
    ): void

    Parameters

    • offset: { ascent: number; descent: number; height: number }

    Returns void

  • get fontSize(): string | number

    Gets or sets the font size in px, percent of parent height, em, or rem. For font declarations, em uses the parent font and rem uses the GUI root font. Relative font sizes on the root use the default 18px font, including adaptive scaling.

    Returns string | number

  • set fontSize(value: string | number): void

    Parameters

    • value: string | number

    Returns void

text

_onPointerPick

  • _onPointerPick(
        target: Control,
        coordinates: Vector2,
        pointerId: number,
        buttonIndex: number,
        notifyClick: boolean,
        pi: Nullable<PointerInfoBase>,
    ): boolean

    Parameters

    • target: Control
    • coordinates: Vector2
    • pointerId: number
    • buttonIndex: number
    • notifyClick: boolean
    • pi: Nullable<PointerInfoBase>

    Returns boolean

  • Tests if a given coordinates belong to the current control

    Parameters

    • x: number

      defines x coordinate to test

    • y: number

      defines y coordinate to test

    Returns boolean

    true if the coordinates are inside the control

  • Will return all controls that have this control as ascendant

    Parameters

    • OptionaldirectDescendantsOnly: boolean

      defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered

    • Optionalpredicate: (control: Control) => boolean

      defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored

    Returns Control[]

    all child controls

  • Will store all controls that have this control as ascendant in a given array

    Parameters

    • results: Control[]

      defines the array where to store the descendants

    • directDescendantsOnly: boolean = false

      defines if true only direct descendants of 'this' will be considered, if false direct and also indirect (children of children, an so on in a recursive manner) descendants of 'this' will be considered

    • Optionalpredicate: (control: Control) => boolean

      defines an optional predicate that will be called on every evaluated child, the predicate must return true for a given child to be part of the result, otherwise it will be ignored

    Returns void

  • A control has a dimension fully defined if that dimension doesn't depend on the parent's dimension. As an example, a control that has dimensions in pixels is fully defined, while in percentage is not fully defined.

    Parameters

    • dim: "width" | "height"

      the dimension to check (width or height)

    Returns boolean

    if the dimension is fully defined

  • Parses a serialized object into this control

    Parameters

    • serializedObject: any

      the object with the serialized properties

    • Optionalhost: AdvancedDynamicTexture

      the texture where the control will be instantiated. Can be empty, in which case the control will be created on the same texture

    • OptionalurlRewriter: (url: string) => string

      defines an url rewriter to update urls before sending them to the controls

    Returns Control

    this control

  • Serializes the current control

    Parameters

    • serializationObject: any

      defined the JSON serialized object

    • force: boolean = false

      if the control should be serialized even if the isSerializable flag is set to false (default false)

    • allowCanvas: boolean = true

      defines if the control is allowed to use a Canvas2D object to serialize (true by default)

    Returns void

  • Shorthand function to set the top, right, bottom, and left padding values on the control.

    Parameters

    • paddingTop: string | number

      The value of the top padding.

    • OptionalpaddingRight: string | number

      The value of the right padding. If omitted, top is used.

    • OptionalpaddingBottom: string | number

      The value of the bottom padding. If omitted, top is used.

    • OptionalpaddingLeft: string | number

      The value of the left padding. If omitted, right is used.

    Returns void

    https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size

  • Shorthand funtion to set the top, right, bottom, and left padding values in pixels on the control.

    Parameters

    • paddingTop: number

      The value in pixels of the top padding.

    • OptionalpaddingRight: number

      The value in pixels of the right padding. If omitted, top is used.

    • OptionalpaddingBottom: number

      The value in pixels of the bottom padding. If omitted, top is used.

    • OptionalpaddingLeft: number

      The value in pixels of the left padding. If omitted, right is used.

    Returns void

    https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size