在 Blazor 上显示和隐藏密码之间切换

Question

我想知道是否可以在密码输入字段上创建一个切换，使用户能够在隐藏或显示密码之间切换，而无需使用 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 事件，我在这里缺少什么？

Answer 1

从评论来看，您似乎只使用服务器端渲染，因此没有交互性。

只需将其放入您的剃须刀文件夹中即可正常工作。

@rendermode InteractiveServer