You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/dateinput/overview.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -89,9 +89,9 @@ The following section lists some Date Input parameters and links to other pages
89
89
90
90
| Parameter | Type and Default Value | Description |
91
91
|---|---|---|
92
-
|`AriaDescribedBy`|`string`| The [`aria-describedby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)if the `input`. |
93
-
|`AriaLabel`|`string`| The [`aria-label` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)if the `input`. |
94
-
|`AriaLabelledBy`|`string`| The [`aria-labelledby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)if the `input`. |
92
+
|`AriaDescribedBy`|`string`| The [`aria-describedby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby)of the `input`. |
93
+
|`AriaLabel`|`string`| The [`aria-label` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)of the `input`. |
94
+
|`AriaLabelledBy`|`string`| The [`aria-labelledby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)of the `input`. |
95
95
|`AutoComplete`|`string`| The [`autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) of the `input`. |
96
96
|`DebounceDelay`|`int` <br/> (`150`) | The time in milliseconds between the last typed symbol and the value update. Use it to balance between client-side performance and number of database queries. |
97
97
|`Enabled`|`bool`| Defines if the Date Input is enabled and accepts new values. |
Copy file name to clipboardExpand all lines: components/maskedtextbox/overview.md
+78-42Lines changed: 78 additions & 42 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,71 +10,106 @@ position: 0
10
10
11
11
# Blazor MaskedTextbox Overview
12
12
13
-
The <ahref = "https://www.telerik.com/blazor-ui/maskedtextbox"target="_blank">Blazor Masked Textbox component</a> provides a mask and prompts the user to enter the data in the required format, and it prevents input that does not match the mask. You can use it to show the user the format the need to write things like phone numbers, credit card numbers, ZIP codes, IP addresses, percentage values and so on.
13
+
The <ahref = "https://www.telerik.com/blazor-ui/maskedtextbox"target="_blank">Blazor MaskedTextbox component</a> provides a mask and prompts the user to enter the data in the required format. The component prevents input that does not match the mask. Use it to show the user the required format for values like phone numbers, credit card numbers, ZIP codes, IP addresses, percentage values, and so on.
14
14
15
-
You can also add a custom CSS class or control various attributes of the `input` element such as the `name`, `placeholder`, `tabindex`, and [more](#features), and also respond to [events]({%slug maskedtextbox-events%}).
15
+
You can also add standard attributes such as custom CSS classes, `name`, `placeholder`, `tabindex`, and [more](#maskedtextbox-parameters), and also respond to [events]({%slug maskedtextbox-events%}).
16
16
17
-
## Creating MaskedTextBox
17
+
## Creating Blazor MaskedTextBox
18
18
19
-
To use a Telerik MaskedTextbox for Blazor:
20
19
21
20
1. Add the `<TelerikMaskedTextBox>` tag to your razor page.
22
-
1. Set its `Value` to the`string` you want to get out of it.
23
-
1.Provide the desired [`Mask`]({%slug maskedtextbox-mask-prompt%}) to prompt the user.
21
+
1. Set its `Value`parameter to a`string`. The parameter supports two-way binding.
22
+
1.Set the desired [`Mask`]({%slug maskedtextbox-mask-prompt%}) to prompt the user.
24
23
25
-
>caption Basic masked textbox with two-way value binding and a credit card mask
24
+
>caption Basic MaskedTextBox with two-way Value binding and a credit card mask
26
25
27
26
````CSHTML
28
-
@TheValue
29
-
<br />
27
+
<TelerikMaskedTextBox @bind-Value="@MaskedValue"
28
+
Mask="0000-0000-0000-0000"
29
+
Width="300px" />
30
30
31
-
<TelerikMaskedTextBox Mask="0000-0000-0000-0000"
32
-
@bind-Value="@TheValue">
33
-
</TelerikMaskedTextBox>
31
+
<br /><br />
32
+
The component value is: @MaskedValue
34
33
35
34
@code{
36
-
string TheValue { get; set; }
35
+
private string MaskedValue { get; set; }
37
36
}
38
37
````
39
38
40
-
>caption The result from the code snippet above before you start writing
39
+
## Validation
40
+
41
+
You can validate the content of the `TelerikMaskedTextBox` using the Data Annotation attributes. [See the Input Validation article for an example on how to validate the content of the MaskedTextBox]({%slug common-features/input-validation%}#maskedtextbox).
41
42
42
-
43
+
## Events
43
44
45
+
The [MaskedTextBox component fires events for value changes and blur]({%slug maskedtextbox-events%}). Use them to respond to user actions.
44
46
45
47
## Mask-Related Parameters
46
48
47
-
The table below provides a quick overview of the mask-related parameters. You can see the [Mask and Prompt article for additional details.]({%slug maskedtextbox-mask-prompt%})
49
+
The table below provides a quick overview of the mask-related parameters. See the [Mask and Prompt article]({%slug maskedtextbox-mask-prompt%}) for additional details.
|`IncludeLiterals`|`bool`| Controls if the literal characters from the mask (those characters that don't carry a special meaning such as brackets or dashes) are included in the `Value`. |
54
-
|`Mask`|`string`|Defines the mask (pattern) that the user has to follow. |
55
-
|`MaskOnFocus`|`bool`| Controls if the mask will be shown to the user only while the input is focused. When set to `true`, the user will see the [FloatingLabel]({%slug floatinglabel-overview%}) (if used) or `Placeholder`(if present) instead of the mask in case the textbox is empty. When there is some value in the input, the mask and input will be shown. |
56
-
|`Prompt`|`char` <br /> `_`|Defines the prompt character the user will see in the mask where there is no user value already. |
57
-
|`PromptPlaceholder`|`char?` <br /> ``(empty space) |Defines the character that is added to the raw `Value` for places where there is no user input yet. |
54
+
|---|---|---|
55
+
|`IncludeLiterals`|`bool`| Controls if the literal characters from the mask are included in the `Value`. These are the characters that don't carry a special meaning such as brackets or dashes. |
56
+
|`Mask`|`string`|The mask (pattern) that the user has to follow. |
57
+
|`MaskOnFocus`|`bool`| Controls if the mask appears only while the input is focused. When `true` and no value is set, the user sees the [FloatingLabel]({%slug floatinglabel-overview%}) or `Placeholder` instead of the mask. When a value is set, the user sees both the mask and value. |
58
+
|`Prompt`|`char` <br /> (`_`)|The character that will show in the mask where there is no user input already. |
59
+
|`PromptPlaceholder`|`char?` <br /> (`` space) |The character that is added to the raw `Value` for places where there is no user input yet. |
58
60
59
61
## MaskedTextBox Parameters
60
62
63
+
See the [MaskedTextBox API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikMaskedTextBox) for a full list of parameters, methods and events.
64
+
61
65
| Parameter | Type and Default value | Description |
|`Class`|`string`| Adds a custom CSS class to the `<div class="k-maskedtextbox">` element. |
64
-
|`Width`|`string`| Controls the width of the `<input>` element. |
65
-
|`DebounceDelay`|`int` <br /> (`150`) | Specifies the time in milliseconds between the last typed symbol and the updating of the value. |
66
-
|`Enabled`|`bool` <br /> (`true`) | Controls if the users can type in the component. |
67
-
|`Id`|`string`| Renders as the `id` attribute on the `<input />` element, so you can attach a `<label for="">` to the input |
68
-
|`Name`|`string`| Renders as the `name` attribute of the HTML element. |
69
-
|`Placeholder`|`string`| Renders as the `placeholder` attribute of the HTML element. |
70
-
|`TabIndex`|`int`| Maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key. |
71
-
|`Title`|`string`| Maps to the `title` attribute of the HTML element. You can use it to add a [tooltip]({%slug tooltip-overview%}). |
72
-
|`ValidateOn`|`ValidationEvent` enum <br /> (`Input`) | configures the event that will trigger validation (if validation is enabled). See the [Validation Modes for Simple Inputs]({%slug common-features/input-validation%}#validation-modes-for-simple-inputs) article for more information. |
73
-
|`Value`|`string`| Get/set the value of the input, can be used for binding. |
66
+
|---|---|---|
67
+
|`AriaDescribedBy`|`string`| The [`aria-describedby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) of the `input`. |
68
+
|`AriaLabel`|`string`| The [`aria-label` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) of the `input`. |
69
+
|`AriaLabelledBy`|`string`| The [`aria-labelledby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) of the `input`. |
70
+
|`DebounceDelay`|`int` <br /> (`150`) | The time in milliseconds between the last typed symbol and the value update. |
71
+
|`Enabled`|`bool` <br /> (`true`) | Controls if users can type in the component. |
72
+
|`Id`|`string`| The `id` attribute of the `input`. |
73
+
|`InputMode`|`string`| The [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) of the `<input />` element. |
74
+
|`Name`|`string`| The `name` attribute of the `input`. |
75
+
|`Placeholder`|`string`| The `placeholder` attribute of the HTML element. |
76
+
|`TabIndex`|`int`| The `tabindex` attribute of the `input`. |
77
+
|`Title`|`string`| The `title` attribute of `input`. Use it to add a [tooltip]({%slug tooltip-overview%}). |
78
+
|`ValidateOn`|`ValidationEvent` enum <br /> (`Input`) | The event that will trigger validation (if validation is enabled). See [Validation Modes for Simple Inputs]({%slug common-features/input-validation%}#validation-modes-for-simple-inputs). |
79
+
|`Value`|`string`| The value of the component. Supports two-way binding. |
80
+
81
+
### Styling and Appearance
74
82
75
-
## Validation
83
+
| Parameter | Type and Default value | Description |
84
+
|---|---|---|
85
+
|`Class`|`string`| The custom CSS class of the `<span class="k-maskedtextbox">` element. |
86
+
|`Width`|`string`| The component width. |
87
+
88
+
Find more parameters to customize the masked textbox styling in the [Appearance article]({%slug maskedtextbox-appearance%}).
89
+
90
+
## MaskedTextBox Reference and Methods
76
91
77
-
You can validate the content of the `TelerikMaskedTextBox` using the Data Annotation attributes. [See the Input Validation article for an example on how to validate the content of the MaskedTextBox]({%slug common-features/input-validation%}#maskedtextbox)
92
+
The MaskedTextBox proves a `FocusAsync` method that enables programmatic focus. To use it, obtain reference to the component instance.
Copy file name to clipboardExpand all lines: components/numerictextbox/overview.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -84,7 +84,7 @@ The Blazor Numeric TextBox allows you to define your desired custom format throu
84
84
|`Decimals`|`int`| The number of allowed decimal places during typing. Takes effect only while the input is focused. The default value depends on the culture. |
85
85
|`Format`|`string`| The number format when the input is not focused. Read more at [Standard Numeric Format Strings in .NET](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings)|
86
86
|`Id`|`string`| The `id` attribute on the `<input />` element. |
87
-
|`InputMode`|`string`| The [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)on the `<input />` element. |
87
+
|`InputMode`|`string`| The [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)of the `<input />` element. |
88
88
|`Max`| numeric type | The maximum value the input can accept. Must match the `Value` type. |
89
89
|`Min`| numeric type | The minimum value the input can accept. Must match the `Value` type. |
90
90
|`Placeholder`|`string`| The `placeholder` attribute of the HTML element. The placeholder will appear if the component is bound to a **nullable** value type and there is no value set. |
0 commit comments