我想知道是否可以在密码输入字段上创建一个切换,使用户能够在隐藏或显示密码之间切换,而无需使用 JavaScript 互操作。
我目前正在尝试的是将一个复选框绑定到一个属性,并根据该检查的真假来设置密码的可见性。
@page "/Test"
<div class="form-floating mb-3">
<input @bind="Input.Password" class="form-control" autocomplete="current-password" aria-required="true" placeholder="password" type="@(ShowPassword ? "text" : "password")" />
<label for="password" class="form-label">Password</label>
<ValidationMessage For="() => Input.Password" class="text-danger" />
</div>
<div class="form-check mb-3">
<input type="checkbox" @bind="ShowPassword" class="form-check-input" />
<label class="form-check-label" for="showPassword">Show Password</label>
</div>
@code {
private bool ShowPassword { get; set; } = false;
private sealed class InputModel
{
[Required]
[DataType(DataType.Password)]
public string Password { get; set; } = "";
}
}
我正在尝试使用数据绑定而不是互操作,我了解 @bind 指令已经设置了 onchange 事件,我在这里缺少什么?
从评论来看,您似乎只使用服务器端渲染,因此没有交互性。
只需将其放入您的剃须刀文件夹中即可正常工作。
@rendermode InteractiveServer