.NET MAUI Blazor中SfTextBox密码框可见性切换图标不生效问题

问题根源 #

你代码里的图标类混用了不同的图标库：初始通过C#添加的是Syncfusion自带的e-eye类（属于e-icons系列），但JavaScript里却在切换Font Awesome的fa-eye/fa-eye-slash类，两者完全不匹配，所以点击后图标无变化。同时密码框的Type属性也没有同步更新，密码可见性控制也会失效。

修复方案 #

统一使用Syncfusion图标库（无需额外引入Font Awesome），同时同步更新密码框类型和图标类：

1. 修正C#代码 #

首先确保定义好绑定变量，调整图标添加和点击逻辑：

// 定义绑定变量
private InputType TextBoxType { get; set; } = InputType.Password;
private bool IsPasswordVisible { get; set; } = false;
private SfTextBox TextBoxPasswordObj { get; set; }

public async Task AddPwdIcon() 
{ 
    // 添加Syncfusion的眼睛图标
    await TextBoxPasswordObj.AddIconAsync("append", "e-icons e-eye", new Dictionary<string, object>()
    { 
        { "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, TogglePasswordVisibility) } 
    }); 
}

public async Task TogglePasswordVisibility()
{
    IsPasswordVisible = !IsPasswordVisible;
    // 同步切换密码框类型
    TextBoxType = IsPasswordVisible ? InputType.Text : InputType.Password;
    // 更新图标类
    await UpdatePasswordIcon();
}

private async Task UpdatePasswordIcon()
{
    // 先移除原有图标，再添加对应状态的图标
    await TextBoxPasswordObj.RemoveIconAsync("append");
    var iconClass = IsPasswordVisible ? "e-icons e-eye-slash" : "e-icons e-eye";
    await TextBoxPasswordObj.AddIconAsync("append", iconClass, new Dictionary<string, object>()
    {
        { "onclick", EventCallback.Factory.Create<MouseEventArgs>(this, TogglePasswordVisibility) }
    });
}

2. 移除冗余JavaScript代码 #

上面的C#逻辑已经直接处理了图标切换和密码类型变更，不需要原来的JavaScript代码，可以删除showhidePassword函数。

3. 保留原有SfTextBox绑定 #

你的原有Blazor代码已经绑定了Type="@TextBoxType"，这部分保持不变即可。

替代方案（保留JavaScript操作） #

如果偏好通过JS处理DOM，修正JS代码操作正确的Syncfusion图标类：

function showhidePassword(textBoxId) {
    const textBox = document.getElementById(textBoxId);
    const icon = textBox.parentElement.querySelector('.e-input-group-icon .e-icons');
    // 切换Syncfusion的图标类
    icon.classList.toggle('e-eye');
    icon.classList.toggle('e-eye-slash');
    // 同步切换密码框类型
    textBox.type = textBox.type === 'password' ? 'text' : 'password';
}

同时修改C#的PasswordClick方法：

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

关键注意事项 #

• 确保项目中已正确引入Syncfusion的图标样式（通常通过NuGet包或CDN自动包含）。
• 避免混用不同图标库的类名，保持图标类的一致性。

内容的提问来源于stack exchange，提问作者Lasitha Lankajeewa