MudBlazor MudTextField回车键自定义行处理逻辑开发求助

要实现你的需求，核心是获取光标所在行的文本内容，再根据内容是否为空执行对应逻辑。以下是完整的实现代码：

@inject IJSRuntime JSRuntime
@using MudBlazor

<MudTextField @ref="_textFieldRef" T="string" Label="Multiline" 
              KeyDownPreventDefault="_preventDefault" 
              Variant="Variant.Text" 
              @bind-Text="_sampleText" 
              Lines="50" AutoGrow="true" Immediate="true" 
              OnKeyDown="@HandleKeyDown" />

<MudMenu @ref="_menuRef" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
    <MudMenuItem>插入模板片段</MudMenuItem>
    <MudMenuItem>快速格式化</MudMenuItem>
    <MudMenuItem>插入日期</MudMenuItem>
</MudMenu>

@code {
    private MudTextField<string>? _textFieldRef;
    private MudMenu? _menuRef;
    private string _sampleText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
    private bool _preventDefault;

    private async Task HandleKeyDown(KeyboardEventArgs e)
    {
        _preventDefault = false;
        if (e.Key == "Enter")
        {
            // 获取光标所在行的文本（已去除前后空白）
            var currentLineText = await JSRuntime.InvokeAsync<string>("getCurrentLineText", _textFieldRef.Element);
            
            if (string.IsNullOrWhiteSpace(currentLineText))
            {
                _preventDefault = true;
                // 在光标位置弹出菜单
                if (_menuRef != null && _textFieldRef != null)
                {
                    var cursorRect = await JSRuntime.InvokeAsync<ElementBoundingClientRect>("getCursorPositionRect", _textFieldRef.Element);
                    await _menuRef.OpenAsync(new BoundingBox(cursorRect.Left, cursorRect.Top, cursorRect.Width, cursorRect.Height));
                }
            }
        }
    }
}

配套JS函数（需放在wwwroot/index.html或独立JS文件中） #

function getCurrentLineText(textarea) {
    const cursorPos = textarea.selectionStart;
    // 定位当前行起始索引
    let lineStart = cursorPos;
    while (lineStart > 0 && textarea.value[lineStart - 1] !== '\n') {
        lineStart--;
    }
    // 定位当前行结束索引
    let lineEnd = cursorPos;
    while (lineEnd < textarea.value.length && textarea.value[lineEnd] !== '\n') {
        lineEnd++;
    }
    // 返回修剪后的行文本
    return textarea.value.substring(lineStart, lineEnd).trim();
}

function getCursorPositionRect(textarea) {
    textarea.focus();
    const range = document.createRange();
    range.setStart(textarea, textarea.selectionStart);
    range.setEnd(textarea, textarea.selectionStart);
    const rect = range.getBoundingClientRect();
    return {
        Left: rect.left,
        Top: rect.top,
        Width: rect.width,
        Height: rect.height
    };
}

关键逻辑说明 #

1. 行文本获取：通过JS原生API定位光标所在行的起始和结束位置，提取并修剪文本，判断是否为空。
2. 阻止默认行为：当行文本为空时，设置_preventDefault = true，拦截MudTextField默认的换行操作。
3. 菜单定位：通过getCursorPositionRect获取光标位置的DOM矩形，将菜单锚定到该位置，确保弹出位置准确。
4. 双向绑定：使用@bind-Text替代单向绑定，保证编辑器文本内容能实时同步更新。

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