TextBox

Description

This component represents a text input field in Blazor using the Gap.Blazor.TextBox model. It supports both single-line and multi-line input, password masking, scroll bar configuration, and selection tracking. It uses Telerik’s TextBox and TextArea components and integrates JavaScript interop for advanced selection handling.

Usage

@if (model.Visible)
{
    <WMStyleBase model=@textBox></WMStyleBase>

    <div @ref="inputWrapperRef" @onkeydown="@keyDownHandler" @onkeypress="@keyPressHandler" @onkeyup="@keyUpHandler">
        @if (textBox.Multiline)
        {
            <TelerikTextArea Enabled="@this.Enabled"
                             ReadOnly="@this.ReadOnly"
                             class="@($"{model.GetStringClasses()} {this.GetScrollBarClass()}")"
                             Value="@Text"
                             ValueChanged="@valueChange"
                             DebounceDelay="0"
                             TabIndex=@TabIndex
                             OnBlur="@OnBlurHandler"
                             @ref="elementRef"
                             ResizeMode="@TextAreaResizeMode.None" />
        }
        else
        {
            <TelerikTextBox Enabled="@this.Enabled"
                            Password="@GetPassword()"
                            ReadOnly="@this.ReadOnly"
                            class="@model.GetStringClasses()"
                            Value="@Text"
                            ValueChanged="@valueChange"
                            DebounceDelay="0"
                            @ref="elementRef"
                            TabIndex=@TabIndex
                            OnBlur="@OnBlurHandler" />
        }
    </div>

    <style>
        [email protected]() {
            border: @GetBorderCss();
        }
        [email protected]() input {
            text-align: @this.textBox.TextAlign.GetTextAlignStyle();
        }
        .no-scrollbar textarea {
            overflow-y: hidden !important;
        }
        .horizontal-scrollbar textarea {
            overflow-y: scroll !important;
        }
    </style>
}

Properties

• textBox: Instance of the Gap.Blazor.TextBox model.

• Multiline: Determines whether to render a TextArea or TextBox.

• PasswordChar: If set, masks input as a password.

• ScrollBars: Controls vertical scroll behavior (None, Horizontal).

• SelectionStart / SelectionLength: Used for tracking and setting text selection.

• TextAlign: Controls horizontal text alignment.

• ReadOnly: Indicates if the input is editable.

Methods

• OnInitialized(): Subscribes to TextAlignChanged to update alignment dynamically.

• Focus(): Focuses the input and applies selection range.

• ApplyTextBoxSelection(): Uses JS interop to set selection range.

• HandleSelectionChange(start, end): Updates the model when selection changes.

• valueChange(string): Updates the model’s text value unless a keypress was already handled.

• GetPassword(): Returns true if PasswordChar is set.

• GetScrollBarClass(): Returns CSS class based on scroll bar configuration.

• GetBorderCss(): Returns border style based on model dimensions.

JavaScript Integration

function applyTextBoxSelection(inputWrapper, selectionStart, selectionEnd) { ... }
function addSelectionChangeListeners(inputWrapper, textBoxComponent) { ... }

• applyTextBoxSelection: Sets the selection range in the input.

• addSelectionChangeListeners: Tracks selection changes and deletion keys.

Dynamic Rendering

• TelerikTextBox / TelerikTextArea: Rendered based on Multiline.

• CSS Styling: Dynamically applies border, alignment, and scroll behavior.

• JS Interop: Enables advanced selection tracking and manipulation.

Events

• TextAlignChanged

• SelectionChange (via JS interop)

• OnBlur

• ValueChanged