Skip to main content

TextBox

WATCH & LEARN0:51 · Animated tutorial
7 scenesPlay, pause, or scrub at your own pace

The Wisej.Web.TextBox control enables users to enter unformatted text.

The TextBox control accepts a single line of text. Enable the Multiline property to allow multiple lines of text input.

info

For a complete list of properties, methods, and events, see the API documentation.

Features​

Label​

The TextBox control supports the inline Label property. This allows setting a label in relation to a TextBox control without creating an additional Label control.

TextBox with label

Data Binding​

Data binding supports formatting and value conversion through the default data binding infrastructure. The default data property is Text.

Spell Checking​

Enable the browser's built-in spell checking by setting the SpellCheck property to true.

TextBox with spell checking enabled

This functionality relies on the browser's language and spell checking support. Third-party spell checking is possible but outside Wisej.NET functionality.

Tool Buttons​

Use the Tools property to add internal buttons aligned to the left or right. Handle their clicks through the ToolClick event.

TextBox with tool buttons

Lazy Events​

Some TextBox events are sent to the server only when a handler is attached. This avoids browser requests for events the application does not use.

The KeyDown event is a Lazy Event, preventing ajax requests for each character typed.

warning

When extending a control class and overriding On[EventName] for a lazy event without attaching a handler, the code won't execute unless a handler is attached.

Watermark​

All Wisej.NET editable controls include the Watermark property, displaying background text in empty fields.

Wisej.NET renders the watermark using the placeholder HTML attribute when supported, otherwise creating an overlaid label managed by the Wisej.NET JavaScript library.

TextBox with watermark

Password​

Set the PasswordChar property to any character or the InputType to Password for a password input field. The PasswordChar value always converts to "*" as browsers control password field display. This property exists for WinForms migration compatibility.

info

For a password visibility toggle, add a tool icon and switch InputType between Text and Password.

Character Casing​

The CharacterCasing property forces text case transformation on both client and server. Wisej.NET performs the change while typing (client) and when setting the Text property (server).

How To​

Enter tab or enter​

By default, Tab moves focus to the next control and Enter does nothing. For tab characters and newlines, set Multiline to true and enable AcceptsTab or AcceptsReturn.

Filter keyboard input​

Limit accepted characters using either:

  1. Set the Filter property to a regular expression
  2. Handle the keydown event on the client with JavaScript

Server-side KeyDown handling cannot prevent character input as the browser processes it before server communication.

Equivalent to setting Filter = "[a-zA-Z]"

Customize the appearance​

Customize TextBox appearance through:

  1. Properties (BackColor, ForeColor, BorderStyle, Font)
  2. Custom theme
  3. Theme mixin
  4. Custom styles

For specialized UI like Material-3 animated underline on focus, use theme customization or custom styles.

TextBox with custom border radius

The image shows a TextBox with "border-radius:20px" in CssStyle. For shared styles, use CssClass and add a StyleSheet file through Default.html or the StyleSheet extender.

Native Input Types​

The TextBox supports various <input> types through the InputType property.

Native input types in Chrome

info

Native input styling is limited to browser-specific CSS properties outside the Wisej.NET theme system.

The Text property always returns a string representing the native input value. Special input types have specific behaviors:

Radio

Clicking toggles the Checked property and fires CheckedChanged (not TextChanged). Checked value is "on".

danger

Browsers don't fire events for <input type=radio>. Content localization depends on browser language.

Checkbox

Clicking toggles the Checked property and fires CheckedChanged (not TextChanged). Checked value is "on".

Advanced​

AutoComplete​

The AutoCompleteList property enables browser native autocomplete with a string array.

TextBox with autocomplete list

The browser filters the AutoCompleteList as the user types.

TextBox showing filtered autocomplete options

The AutoComplete property controls this feature. When enabled, browsers may build their own suggestions.

Common AutoComplete options include:

OptionDescription
EmailAn email address
UsernameA username or account name
NewPasswordA new password field for account creation or password changes
CurrentPasswordThe user's current password
OneTimeCodeA one-time verification code

See Mozilla Developer Site for all options.

danger

Browser implementation controls this functionality, including when to use previous values.

Select content when focused​

When the user tabs into a field, Wisej.NET selects all its text. Clicking the field places the caret at the clicked position.

Set SelectOnEnter to true to select the text regardless of how the control receives focus.

Native context menu​

EnableNativeContextMenu (default: true) controls the browser's context menu on right-click. Disable to prevent the native menu.

info

An assigned ContextMenu always overrides the native menu.

JavaScript Widget​

ItemDescription
Class name"wisej.web.TextBox" or "wisej.web.TextArea" when Multiline is true
Theme appearance"textbox", see Themes
Child components"textfield" is the inner <input> widget. See JavaScript
Toolcontainer state"editor", see Embedded Tools
Source codehttps://github.com/iceteagroup/wisej-js