如何支持onblur及类似事件？contenteditable场景实现方案咨询

我明白你在Blazor里使用contenteditable元素时遇到的痛点——@onchange确实不会对这类元素触发，而你想实现类似失去焦点时自动处理内容更新的逻辑对吧？不用非得依赖单独的“保存到数据库”按钮，这里有几个更贴合需求的方案：

方案1：直接使用@onblur结合JS互操作 #

Blazor本身支持@onblur事件，只是需要通过JS互操作来获取contenteditable元素的最新内容，这完全可行，也是最贴近你最初想法的方案：

首先在Razor组件里写：

<td contenteditable="true" @onblur="HandleTdBlur" @ref="editableTd">@CurrentCellValue</td>

然后在组件的代码块里添加逻辑：

@inject IJSRuntime JS

private ElementReference editableTd;
private string CurrentCellValue = "初始内容";

private async Task HandleTdBlur()
{
    // 通过JS获取编辑后的内容
    var updatedValue = await JS.InvokeAsync<string>("getContenteditableValue", editableTd);
    
    // 执行你的数据库保存逻辑
    await SaveCellValueToDatabase(updatedValue);
    
    // 更新本地状态，避免显示不一致
    CurrentCellValue = updatedValue;
}

// 假设这是你的数据库保存方法
private async Task SaveCellValueToDatabase(string value)
{
    // 这里写你的API调用或数据库操作逻辑
}

最后在wwwroot目录下的JS文件（比如site.js）里添加这个辅助函数：

function getContenteditableValue(element) {
    // 优先取innerText，避免HTML标签干扰
    return element.innerText.trim() || element.textContent.trim();
}

这个方案的优势是完全符合你想要的“失去焦点即保存”的交互，用户操作流畅，不需要额外点击按钮。

方案2：实时监听input事件（可选） #

如果你希望内容变化时实时同步（而不是等失去焦点），可以把@onblur换成@oninput，逻辑类似，但建议加上防抖处理，避免过于频繁地调用保存接口：

private CancellationTokenSource _debounceTokenSource;

private async Task HandleTdInput()
{
    _debounceTokenSource?.Cancel();
    _debounceTokenSource = new CancellationTokenSource();
    
    try
    {
        // 延迟500ms执行，避免连续输入时频繁触发
        await Task.Delay(500, _debounceTokenSource.Token);
        var updatedValue = await JS.InvokeAsync<string>("getContenteditableValue", editableTd);
        await SaveCellValueToDatabase(updatedValue);
        CurrentCellValue = updatedValue;
    }
    catch (TaskCanceledException)
    {
        // 防抖取消，忽略即可
    }
}

方案3：封装成可复用组件 #

如果你的项目里多个地方需要用到可编辑的单元格，可以把这个逻辑封装成自定义组件，提升复用性：

<!-- ContentEditableCell.razor -->
<td contenteditable="true" 
    @onblur="HandleBlur" 
    @ref="cellRef"
    class="@CssClass">@Value</td>

@code {
    [Inject] private IJSRuntime JS { get; set; }
    
    [Parameter] public string Value { get; set; }
    [Parameter] public EventCallback<string> ValueChanged { get; set; }
    [Parameter] public string CssClass { get; set; }

    private ElementReference cellRef;

    private async Task HandleBlur()
    {
        var newValue = await JS.InvokeAsync<string>("getContenteditableValue", cellRef);
        if (newValue != Value)
        {
            await ValueChanged.InvokeAsync(newValue);
        }
    }
}

使用的时候就像普通绑定组件一样简单：

<ContentEditableCell @bind-Value="MyCellValue" CssClass="editable-cell" />

然后在父组件里处理MyCellValue变化后的保存逻辑即可。

关于“保存按钮”的场景 #

如果你的业务需求是让用户批量编辑多个单元格后统一保存，那单独的保存按钮确实是合理的选择——你可以先把所有编辑后的内容暂存在本地状态，点击按钮时一次性提交到数据库。但如果是单个单元格编辑后即时保存，上面的@onblur方案体验会更好。

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