TextBox
Represents an <input> element that can be used to edit unformatted text.
Last updated
Represents an <input> element that can be used to edit unformatted text.
Last updated
The Wisej.Web.TextBox control allows the user to enter unformatted text in an application.
Usually a TextBox control accepts a single line of text. You can use the Multiline property to allow the control to display and accept text on more than one line.
For a full list of properties, methods and events see the API documentation.
The TextBox control supports the inline Label property. This allows an application to set a label in relation to a TextBox control without having to create an additional Label control.
LabelsData binding is fully supported, including formatting and conversion of the value, through the default data binding infrastructure. For the TextBox, the default data property is Text.
Data BindingYou can enable the browser's built-in spell checking by setting the SpellCheck property to true.
This functionality is entirely based on the browser's current language and spell checking support. If you need to use a third party spell checking you can, but it's outside of the Wisej functionality.
This is one of the most useful feature that Wisej adds to most controls. The Tools property allows the application to add internal buttons aligned left or right and handle user clicks through the ToolClicked event.
Some events exposed by the TextBox control are fired only when there is a handler attached to the event. This features prevents the browser from sending frequent events unless the application has explicitly subscribed to the event.
For example, the KeyDown event is a Lazy Event, otherwise the browser would fire an ajax request every time the user typed a character in the TextBox.
If you extend a control class and override the On[EventName] method to handle a lazy event without attaching a handler, your code will not be called unless there is an handler attached to the event.
All editable controls in Wisej expose the Watermark property. It displays background text in the field when it's empty.
Wisej renders the watermark property to the placeholder HTML attribute, if it's supported by the browser, otherwise it creates an overlaid label entirely managed by the Wisej JavaScript library.
Set the PasswordChar property to any character or the InputType property to Password to display a password input field in the browser. The character that you assign to the PasswordChar property is irrelevant (Wisej will always convert it to "*") because you cannot change what the browser displays in password fields. This property exists for compatibility with WinForms migrations.
To implement the common "eye" button that shows or hides the password, simply use the Tools to add an icon and change the InputType to Text and Password.
Use the CharacterCasing property to force the browser and the server to change the casing of the text entered by the user. Wisej performs the transformation on the client when typing and on the server when assigning the Text property.
When typing in a TextBox, pressing the Tab key will move the focus to the next control and pressing the Enter key will do nothing. If your application needs to include tabs and new lines in the text, set the Multiline property to true and the AcceptsTab or the AcceptsReturn properties to true.
To limit the characters that are accepted by a TextBox you have to handle the browser's keydown event on the client in JavaScript.
It is not possible to stop the <input> element from accepting a character by handling the KeyDown event on the server side - the event has already happened and it has already been processed by the browser by the time it reaches the server.
There are two ways to filter the keyboard input: set the Filter property to a regular expression or handle the keydown event on the client with JavaScript.
For example, setting the Filter property to "[a-zA-Z]" will allow the user to only type alphabetical characters in the range a-z or A-Z. To achieve the same with JavaScript on a client event, add an handler for the keydown event.
There are several ways to customize the appearance of a TextBox: use the available properties, customize the theme, or adding custom styles.
The properties that can change the appearance of a TextBox (and most controls) are usually limited to BackColor, ForeColor, BorderStyle, and Font properties.
If you need to achieve some very special UI design, like the Material-3 animated underline when the TextBox gains the focus, you will have to either create a custom theme, or a theme mixin or add custom styles to the control.
You can see in the image above a TextBox with "border-radius:20px" assigned to the CssStyle property. To apply a shared style, set the CssClass property instead and add a StyleSheet file (.css) to the application either in Default.html or using the StyleSheet extender.
A TextBox is usually just a text box where the user can type. However, browsers expanded the "type" attribute of the <input> element considerably to use native custom editors.
Wisej supports setting most of the input types through the InputType property.
The appearance of the native input types can be styled to a very limited extent using a CSS style sheet and some browser-specific properties. It is entirely outside of the Wisej theming system.
The value that is returned to the Text property is always (obviously) a string that represents the value in the native input control. Some input types have some special requirements:
Radio
When the user clicks the checkbox, it flips the Checked property and fires the CheckedChanged event. It does not fire the TextChanged event. The text value when checked in "on".
Browsers do not fire any event on the <input type=radio> elements.
Content cannot be localized, it depends always on the browser's language.
Checkbox
When the user clicks the checkbox, it flips the Checked property and fires the CheckedChanged event. It does not fire the TextChanged event. The text value when checked in "on".
You can use the AutoCompleteList property to assign a string array to the TextBox control and take advantage of the browser's native autocomplete functionality.
As the user starts typing, the browser will provide a filtered list of the texts in the AutoCompleteList array_._
You use the AutoComplete_ _property to turn this functionality on or off. When AutoComplete is on (or default which is off in Wisej), the browser may also build its own autocomplete list.
You can also find preset AutoComplete options within the property, here are a few:
| Option | Description |
|---|---|
An email address. | |
Username | A username or account name. |
NewPassword | A new password. When creating a new account or changing passwords, this should be used for an "Enter your new password" or "Confirm new password" field, as opposed to a general "Enter your current password" field that might be present. |
CurrentPassword | The user's current password. |
OneTimeCode | A one-time code used for verifying user identity. |
You can find a full list of AutoComplete options on the Mozilla Developer Site.
This functionality is entirely dependent on the browser. Including when to use its own autocomplete list from previously entered values.
Wisej selects the full text in the TextBox when tabbing from field to field. However, when the user clicks (or taps) into a TextBox, the cursor is placed at the tap location.
You can force the automatic full selection of the text every time the TextBox is focused by setting the SelectOnEnter property to true.
The property EnableNativeContextMenu (default: true) allows the browser to display its native context menu when the user right clicks on the text in the TextBox. If you set this property to false, right clicking (or long tapping) will not display the native context menu.
If the TextBox has been assigned a ContextMenu, it always suppresses the native context menu and uses the one assigned by the application.
| Item | Description |
|---|---|
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 code |
