在 .NET MAUI Blazor 的 SfTextBox 中切换眼睛图标以实现密码可见性

Question

我正在 .NET MAUI Blazor 应用程序中使用 SfTextBox 创建一个带有眼睛图标的密码字段，以切换密码可见性。我的目标是每当用户单击显示/隐藏密码时，将图标从“眼睛”更改为“斜线”（或类似图标）。

ID="passwordBox"

@ref="TextBoxPasswordObj"

@bind-Value="_tokenModel.Password"

ValueChange="@PasswordValueChangeHandler"

Input="@PasswordInputHandler"

Type="@TextBoxType"

CssClass="input-box"

Placeholder="Password"

Created="@AddPwdIcon"

Destroyed="AddPwdIconDestroyed"

FloatLabelType="@FloatLabelType.Auto"

@onkeydown="OnPasswordInputKeyDown"

></SfTextBox>

public async void AddPwdIcon() { 

// Adding the eye icon initially await TextBoxPasswordObj.AddIconAsync("append", "e-icons e-eye", new Dictionary<string, object>() { { "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, PasswordClick) } }); 

}

public async Task PasswordClick() {

await _JSRuntime.InvokeAsync<object>("showhidePassword", "passwordBox"); IsPasswordVisible = !IsPasswordVisible; 

}

//Java 脚本

函数 showhidePassword(textBoxId) {

const textBox = document.getElementById(textBoxId);

const icon = textBox.parentElement.querySelector('.e-input-group-icon');

icon.classList.toggle('fa-eye');

icon.classList.toggle('fa-eye-slash');

}

问题是当我点击它来显示或隐藏密码时，图标没有改变。我使用了 e-eye 和 fa-eye-slash 类，假设它们会正确切换，但图标保持不变。

我想更改点击后的图标

Answer 1

选择器很奇怪。您可以尝试以下示例

@page "/"
@inject IJSRuntime JSRuntime

<SfTextBox ID="passwordBox" @ref="TextBoxObj" Type="@TextBoxType" Placeholder="Enter Password" Created="@Created"></SfTextBox>

<script>
    function showhidePassword(textBoxId) {
        const textBox = document.getElementById(textBoxId);
        const icon = textBox.parentElement.querySelector('.e-icons');
        icon.classList.toggle('e-eye');
        icon.classList.toggle('e-eye-slash');
    }
</script>

@code {
    SfTextBox TextBoxObj;
    bool IsPasswordVisible = false;
    InputType TextBoxType => IsPasswordVisible ? InputType.Text : InputType.Password;

    public async Task Created()
    {
        await TextBoxObj.AddIconAsync("append", "e-icons e-eye-slash", new Dictionary<string, object>() { { "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, PasswordClick) } });
    }

    public async Task PasswordClick()
    {
        await JSRuntime.InvokeAsync<object>("showhidePassword", "passwordBox");
        IsPasswordVisible = !IsPasswordVisible;
    }
}