x4js - v2.2.49
    Preparing search index...

    Class Input

    Customizable input component supporting multiple types (text, number, date, etc.). Auto-generates CSS class: x4input.

    // Text input
    const nameInput = new Input({ type: "text", placeholder: "Enter name" });

    // Checkbox
    const agreeCheckbox = new Input({
      type: "checkbox",
      checked: true,
      change: (e) => console.log("Checked:", e.value)
    });

    --input-sel-background
    --input-sel-color
    --input-placeholder
    --input-error
    --input-checkbox-color

    Hierarchy (View Summary)

    Index
    constructor
    clsprefix dom props
    addClass addDOMEvent animate appendContent childCount clearContent clearInterval clearTimeout clearTimeouts disable enable enumChildComponents enumChildNodes fire firstChild focus getAttribute getBoundingRect getCheck getComputedStyle getData getIntData getInternalData getNumValue getSelection getStyleValue getStyleVariable getValue hasClass hasFocus hide isDisabled isValid isVisible lastChild loadPState nextElement off on onGlobalEvent parentElement prependContent prevElement query queryAll queryInterface releaseCapture removeChild removeClass removeClassEx scrollIntoView select selectAll setAria setAttribute setAttributes setCapture setCheck setClass setContent setData setDOMEvents setHeight setInternalData setInterval setNumValue setReadOnly setStyle setStyleValue setStyleVariable setTimeout setValue setWidth show toggleClass visitChildren createElement createFragment parentElement
    clsprefix: string
    dom: Element

    The underlying DOM element of the component.

    props: InputProps

    The properties passed to the component's constructor.

    • Adds one or more CSS classes to the component's DOM element. Multiple classes can be provided as a space-separated string.

      Parameters

      • cls: string

        The CSS class(es) to add.

      Returns void

    • Adds a DOM event listener to the component's DOM element.

      Type Parameters

      Parameters

      • name: K

        The name of the DOM event (e.g., 'click', 'mouseover').

      • listener: GlobalDOMEvents[K]

        The event handler function.

      • prepend: boolean = false

        If true, the listener is added to the beginning of the event listener list. Defaults to false.

      Returns void

    • Animates the component's DOM element using the Web Animations API.

      Parameters

      • keyframes: Keyframe[]

        An array of keyframe objects or a Keyframe object.

      • duration: number

        The duration of the animation in milliseconds, or a KeyframeAnimationOptions object.

      Returns void

    • Appends content to the end of the component's DOM element. Content can be a single Component, an array of Components, a string, an array of strings, raw HTML, an array of raw HTML, a number, or a boolean.

      Parameters

      Returns void

      for simplicity, null is also allowed: setContent( [ optional ? myControl : null, ])

    • Clears all timeouts and intervals currently managed by this instance. This stops all scheduled callbacks and removes their references.

      Returns void

      setTimeout

    • Enables or disables the component. This sets the disabled attribute and also propagates the disabled state to child input elements.

      Parameters

      • ena: boolean = true

        If true, the component is enabled; if false, it's disabled. Defaults to true.

      Returns this

      The component instance for chaining.

    • Enumerates all child DOM nodes of this component. Not all nodes may be components.

      Parameters

      • recursive: boolean

        If true, searches all descendant nodes; otherwise, only direct children.

      Returns Node[]

      An array of child DOM nodes.

    • Dispatches an event with a given name and payload to all registered listeners. If no listeners are registered for the event name, or if no EventSource has been initialized, this method does nothing.

      Type Parameters

      Parameters

      • name: K

        The name of the event to fire.

      • ev: InputEvents[K]

        The payload (event object) to pass to the listeners.

      Returns void

      • on
      • off

    • Retrieves the value of an HTML attribute from the component's DOM element.

      Parameters

      • name: string

        The name of the attribute.

      Returns string

      The string value of the attribute, or null if not present.

    • Retrieves the computed style for the component's DOM element.

      Returns CSSStyleDeclaration

      A CSSStyleDeclaration object representing the computed styles.

    • Retrieves the value of a data-* attribute from the component's DOM element.

      Parameters

      • name: string

        The suffix of the data- attribute (e.g., for data-foo, use "foo").

      Returns string

      The string value of the data-* attribute, or null if not present.

      • Component.setIntData
      • Component.getIntData
      • Component.setInternalData
      • Component.getInternalData

    • Retrieves the integer value of a data-* attribute from the component's DOM element. Returns undefined if the attribute is not present or cannot be parsed as a number.

      Parameters

      • name: string

        The suffix of the data- attribute.

      Returns number

      The integer value of the data-* attribute, or undefined.

    • Gets the numeric value (for type="number" or type="range").

      Parameters

      • OptionaldefNan: number

        Default value if parsing fails (default: NaN).

      Returns number

      Parsed number or defNan.

    • Gets the current text selection.

      Returns { length: number; start: number }

      Object with start and length properties.

    • Retrieves the computed inline CSS style value for a specific property. This only returns styles explicitly set via setStyle or setStyleValue, not inherited or stylesheet-defined styles.

      Type Parameters

      • K extends keyof CSSStyleDeclaration

      Parameters

      • name: K

        The name of the CSS property.

      Returns CSSStyleDeclaration[K]

      The value of the inline CSS property.

    • Retrieves the value of a CSS custom property (CSS variable) for the component. The computed style of the element is used.

      Parameters

      • name: string

        The name of the CSS variable.

      Returns string

      The string value of the CSS variable.

    • Checks if the component's DOM element has a specific CSS class.

      Parameters

      • cls: string

        The CSS class name to check.

      Returns boolean

      true if the class is present, false otherwise.

    • Checks if the component's DOM element currently has focus.

      Returns boolean

      true if the component is focused, false otherwise.

    • Checks if the component is marked as disabled. This checks for the presence of the disabled attribute.

      Returns string

      The string value of the disabled attribute, or null if not present.

    • Checks if the component's DOM element is currently visible (i.e., not hidden by display: none).

      Returns boolean

      true if the component is visible, false otherwise.

    • Removes a previously registered event listener. If the listener was not found or no events were registered, this method does nothing.

      Type Parameters

      Parameters

      • name: K

        The name of the event from which to remove the listener.

      • listener: (ev: InputEvents[K]) => void

        The specific listener function to remove.

      Returns void

      • on
      • fire

    • Registers an event listener for a specific event name. The listener will be invoked when an event with the given name is fired. Returns an object with an off() method, which can be used to conveniently remove this specific listener.

      Type Parameters

      Parameters

      • name: K

        The name of the event to listen for.

      • listener: (ev: InputEvents[K]) => void

        The callback function to execute when the event is fired.

      Returns { off: () => void }

      An object containing an off() method to unsubscribe the listener.

      fire attach to an event

    • Attaches a listener for global messages dispatched by the application. The listener is automatically removed when the component's DOM element is removed.

      Parameters

      • cb: (ev: EvMessage) => void

        The callback function to execute when a global message is received.

      Returns void

    • Prepends content to the beginning of the component's DOM element. Content can be a single Component, an array of Components, a string, an array of strings, raw HTML, an array of raw HTML, a number, or a boolean.

      Parameters

      Returns void

    • Releases pointer capture on the component's DOM element for a specific pointer.

      Parameters

      • pointerId: number

        The unique ID of the pointer.

      Returns void

    • Removes one or more CSS classes from the component's DOM element. If * is passed as the class name, all classes will be removed. Multiple classes can be provided as a space-separated string.

      Parameters

      • cls: string

        The CSS class(es) to remove, or * to clear all.

      Returns void

    • Removes all CSS classes from the component's DOM element that match a given regular expression.

      Parameters

      • re: RegExp

        The regular expression to match against class names.

      Returns void

    • Scrolls the component's DOM element into the visible area of the browser window.

      Parameters

      • Optionalarg: boolean | ScrollIntoViewOptions

        Optional. A boolean (true for smooth scroll) or an object specifying scroll options.

      Returns void

    • Selects a text range.

      Parameters

      • start: number

        Start position

      • length: number = 9999

        Length of selection

      Returns void

    • Sets an ARIA attribute on the component's DOM element.

      Parameters

      • name: keyof AriaAttributes

        The name of the ARIA attribute (e.g., 'aria-label').

      • value: string | number | boolean

        The value of the ARIA attribute.

      Returns this

      The component instance for chaining.

    • Sets a single HTML attribute on the component's DOM element. If value is null, undefined, or false, the attribute will be removed.

      Parameters

      • name: string

        The name of the attribute.

      • value: string | number | boolean

        The value of the attribute.

      Returns void

    • Sets pointer capture on the component's DOM element for a specific pointer.

      Parameters

      • pointerId: number

        The unique ID of the pointer.

      Returns void

      control.on("pointerdown", (ev) => {
      	ev.preventDefault(); // Prevent default browser actions
      	control.setCapture(ev.pointerId);
      }

    • Sets or removes a CSS class based on a boolean condition.

      Parameters

      • cls: string

        The CSS class to manage.

      • set: boolean = true

        If true, the class is added; if false, it's removed. Defaults to true.

      Returns this

      The component instance for chaining.

    • Replaces the entire content of the component's DOM element with new content. Any existing content will be cleared before the new content is added.

      Parameters

      • content: ComponentContent

        The new content to set. Can be a single item or an array of items.

      Returns void

    • Sets the value of a data-* attribute on the component's DOM element.

      Parameters

      • name: string

        The suffix of the data- attribute.

      • value: string

        The string value to set.

      Returns void

    • Sets the height of the component.

      Parameters

      • h: string | number

        The height value. Can be a number (interpreted as pixels) or a string (e.g., "100px", "50%").

      Returns void

    • idem as setData but onot on dom, you can store anything

      Type Parameters

      • T

      Parameters

      • name: string | symbol
      • value: T

      Returns this

    • Sets an interval that repeatedly executes a callback function after a specified delay. If a timeout with the same name already exists, it will be cleared before the new one is set.

      Parameters

      • name: string

        A unique string identifier for this timeout.

      • ms: number

        The delay in milliseconds before the callback is executed.

      • callback: () => void

        The function to execute after the delay.

      Returns void

    • Sets a numeric value with optional decimal precision.

      Parameters

      • value: number

        Numeric value to set.

      • ndec: number = -1

        Decimal places: -1 = auto, -2 = use step prop, ≥0 = fixed decimals.

      Returns void

    • Sets multiple inline CSS styles on the component's DOM element. Numeric values for properties like width or height will automatically append "px" unless they are unitless.

      Parameters

      • style: Partial<CSSStyleDeclaration>

        An object where keys are CSS property names and values are their corresponding styles.

      Returns this

      The component instance for chaining.

    • Sets a single inline CSS style property on the component's DOM element. Numeric values for properties like width or height will automatically append "px" unless they are unitless.

      Type Parameters

      • K extends keyof CSSStyleDeclaration

      Parameters

      • name: K

        The name of the CSS property.

      • value: number | CSSStyleDeclaration[K]

        The value of the CSS property.

      Returns this

      The component instance for chaining.

    • Sets a CSS custom property (CSS variable) on the component's DOM element.

      Parameters

      • name: string

        The name of the CSS variable (e.g., '--my-color').

      • value: string

        The value to set for the CSS variable.

      Returns void

    • Sets a timeout that executes a callback function after a specified delay. If a timeout with the same name already exists, it will be cleared before the new one is set.

      Parameters

      • name: string

        A unique string identifier for this timeout.

      • ms: number

        The delay in milliseconds before the callback is executed.

      • callback: () => void

        The function to execute after the delay.

      Returns void

    • Sets the input value.

      Parameters

      • value: string

        New value (converted to string).

      Returns void

    • Sets the width of the component.

      Parameters

      • w: string | number

        The width value. Can be a number (interpreted as pixels) or a string (e.g., "100px", "50%").

      Returns void

    • Shows or hides the component. It toggles the x4hidden CSS class.

      Parameters

      • vis: boolean = true

        If true, the component is shown; if false, it's hidden. Defaults to true.

      Returns this

      The component instance for chaining.

    • Toggles the presence of one or more CSS classes on the component's DOM element. If a class is present, it's removed; otherwise, it's added. Multiple classes can be provided as a space-separated string.

      Parameters

      • cls: string

        The CSS class(es) to toggle.

      Returns void

    • Visits all descendant components of this component, executing a callback function for each. The traversal stops if the callback returns true.

      Parameters

      • cb: (el: Component) => boolean

        The callback function to execute for each component.

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Methods
    addClassaddDOMEventanimateappendContentchildCountclearContentclearIntervalclearTimeoutclearTimeoutsdisableenableenumChildComponentsenumChildNodesfirefirstChildfocusgetAttributegetBoundingRectgetCheckgetComputedStylegetDatagetIntDatagetInternalDatagetNumValuegetSelectiongetStyleValuegetStyleVariablegetValuehasClasshasFocushideisDisabledisValidisVisiblelastChildloadPStatenextElementoffononGlobalEventparentElementprependContentprevElementqueryqueryAllqueryInterfacereleaseCaptureremoveChildremoveClassremoveClassExscrollIntoViewselectselectAllsetAriasetAttributesetAttributessetCapturesetChecksetClasssetContentsetDatasetDOMEventssetHeightsetInternalDatasetIntervalsetNumValuesetReadOnlysetStylesetStyleValuesetStyleVariablesetTimeoutsetValuesetWidthshowtoggleClassvisitChildrencreateElementcreateFragmentparentElement