Skip to content

Commit 9ce37a6

Browse files
dimodiyordan-mitev
dimodi
and
yordan-mitev
authored
kb(textbox): Add KB for password textbox eye toggle (#2651)
* kb(textbox): Add KB for password textbox eye toggle * Update knowledge-base/textbox-eye-reveal-password.md * Update knowledge-base/textbox-eye-reveal-password.md Co-authored-by: Yordan <[email protected]> --------- Co-authored-by: Yordan <[email protected]>
1 parent 708c5e6 commit 9ce37a6

File tree

2 files changed

+85
-17
lines changed

2 files changed

+85
-17
lines changed

‎components/textbox/overview.md‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ The Blazor TextBox provides various parameters to configure the component:
6161
| `MaxLength` | `int?` | Maps to the `maxlength` attribute of the HTML `<input />` element. |
6262
| `InputMode` | `string` | A `string` that maps to the [`inputmode`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) attribute of the HTML element. You can use it to instruct the rendering device to show a suitable virtual keyboard (for example, one optimized for entering an URL or an email). Make sure to use values that make sense for a text input. For example, if you need a numerical input, use the TelerikNumericTextBox component, or the TelerikDatePicker for dates. |
6363
| `Name` | `string` | The `name` attribute of the HTML element. It is usually required so the `AutoComplete` will be honored by the browser. |
64-
| `Password` | `bool` | When set to `true`, the HTML element renders `type="password"` so that the user input is hidden. You can find examples of validation and reveal buttons in the [Live Demo: Password Textbox](https://demos.telerik.com/blazor-ui/textbox/password) |
64+
| `Password` | `bool` | When set to `true`, the HTML element renders `type="password"` so that the user input is hidden. You can find examples of validation and reveal buttons in the [Password Textbox demo](https://demos.telerik.com/blazor-ui/textbox/password) and the [Add Eye Icon to Reveal a TextBox Password]({%slug textbox-kb-eye-reveal-password%}) article. |
6565
| `Placeholder` | `string` | A `string` that maps to the `placeholder` attribute of the HTML element. If a `Label` is defined, it will be shown instead of the placeholder when the input is not focused. |
6666
| `ShowClearButton` | `bool` | Defines if the user can clear the component value through an **x** button rendered inside the input. |
6767
| `SpellCheck` | `string` | A `string` that maps to the [`spellcheck`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck) attribute of the HTML element. Use it to disable browser spellchecking if it's intrusive to the user or due to [privacy and security concerns](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck#security_and_privacy_concerns). |
@@ -113,22 +113,7 @@ The TextBox provides a `FocusAsync` method that allows the application to focus
113113

114114
>caption Password type TextBox
115115
116-
````RAZOR
117-
@* An example of enabling the Password mode of the text box. Make sure to add a form and validation
118-
for example: https://demos.telerik.com/blazor-ui/textbox/password
119-
*@
120-
121-
<TelerikTextBox Password="true"
122-
@bind-Value="@ThePassword"
123-
AutoComplete="current-password"
124-
Name="password" Id="password" />
125-
126-
@code {
127-
// in a real case you should have a form, a model, and validation
128-
// the form may also need autocomplete attribute and other corresponding inputs to enable autocompletion
129-
string ThePassword { get; set; }
130-
}
131-
````
116+
See [Add Eye Icon to Reveal a TextBox Password]({%slug textbox-kb-eye-reveal-password%}).
132117

133118
>caption Programmatically change the TextBox value
134119

‎knowledge-base/textbox-eye-reveal-password.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
title: Add Eye Icon to Reveal a TextBox Password
3+
description: Learn how to implement an eye toggle button that reveals the typed password in a Telerik TextBox for Blazor.
4+
type: how-to
5+
page_title: How to Add Eye Icon to Telerik Password TextBox in Blazor
6+
slug: textbox-kb-eye-reveal-password
7+
tags: telerik, blazor, textbox
8+
ticketid: 1673598, 1672864, 1656817, 1655436, 1640843, 1619127, 1584950
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>TextBox for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
This KB answers the following questions:
26+
27+
* How to add an eye icon to a text input and click the icon to show and hide the entered password?
28+
* How to implement a button that reveals the password in a Telerik TextBox on click?
29+
* How to make an eye toggle appear in a password textbox no matter if the textbox is focused or not?
30+
* How to use `mouseup` and `mousedown` events on the `TelerikSvgIcon` control to toggle a password field?
31+
32+
## Solution
33+
34+
1. Add a [Button]({%slug components/button/overview%}) or a [ToggleButton]({%slug togglebutton-overview%}) with the desired [icon]({%slug button-icons%}) next to the TextBox or inside the [TextBox `SuffixTemplate`]({%slug common-features/input-adornments%}).
35+
1. Use the [Button's `OnClick` event handler]({%slug button-events%}) to toggle the [TextBox `Password` parameter]({%slug components/textbox/overview%}#textbox-parameters) value.
36+
1. (optional) Instead of Button `OnClick`, use `@onmousedown` and `@onmouseup` Blazor events on a generic HTML element to toggle the TextBox `Password` parameter. This approach allows using events with Telerik components that do not expose them, for example, a [Telerik SVG icon or a font icon]({%slug common-features-icons%}).
37+
1. To use the TextBox with a reveal button inside a [Telerik Form, use a `FormItem` `Template`]({%slug form-formitems-template%}).
38+
39+
>caption Add an eye icon to reveal a password
40+
41+
````RAZOR
42+
<p>Reveal password on Telerik Button OnClick</p>
43+
44+
<TelerikTextBox @bind-Value="@TextBoxValue1" Password="@TextBoxPassword1" Width="200px">
45+
<TextBoxSuffixTemplate>
46+
<TelerikToggleButton Icon="@( TextBoxPassword1 ? SvgIcon.Eye : SvgIcon.EyeSlash )"
47+
OnClick="@( () => TextBoxPassword1 = !TextBoxPassword1 )"
48+
Selected="@( !TextBoxPassword1 )" />
49+
</TextBoxSuffixTemplate>
50+
</TelerikTextBox>
51+
52+
<p>Reveal password on HTML element @@onmousedown</p>
53+
54+
<TelerikTextBox @bind-Value="@TextBoxValue2" Password="@TextBoxPassword2" Width="200px">
55+
<TextBoxSuffixTemplate>
56+
<span @onmousedown="@( () => TextBoxPassword2 = false )"
57+
@onmouseup="@( () => TextBoxPassword2 = true )">
58+
<TelerikButton Icon="@SvgIcon.Eye" ButtonType="@ButtonType.Button" />
59+
</span>
60+
</TextBoxSuffixTemplate>
61+
</TelerikTextBox>
62+
63+
<style>
64+
/* Hide native browser eye icon in Edge if enabled */
65+
input.k-input-inner[type="password"]::-ms-reveal,
66+
input.k-input-innerinput[type="password"]::-ms-clear {
67+
display: none;
68+
}
69+
</style>
70+
71+
@code {
72+
private string TextBoxValue1 { get; set; } = "abcde1";
73+
private bool TextBoxPassword1 { get; set; } = true;
74+
75+
private string TextBoxValue2 { get; set; } = "zyxwv2";
76+
private bool TextBoxPassword2 { get; set; } = true;
77+
}
78+
````
79+
80+
## See Also
81+
82+
* [Input Adornments]({%slug common-features/input-adornments%})
83+
* [Form Item Templates]({%slug form-formitems-template%})

0 commit comments

Comments
 (0)