Blazor InputFile组件键盘粘贴无障碍问题求助

问题背景 #

已实现Blazor InputFile组件的拖拽/粘贴文件功能，但必须先点击页面激活后才能使用Ctrl+V粘贴；未激活页面时无法操作。需优化为无需鼠标激活即可完成粘贴。

修改步骤 #

1. 调整Upload.razor的JS调用逻辑 #

修改OnAfterRenderAsync方法，移除对容器元素的传递：

override protected async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        _filePasteModule = await JS.InvokeAsync<IJSObjectReference>("import", "./js/filePaste.js");
        // 仅传递InputFile元素，不再传入容器
        _filePasteFunctionReference = await _filePasteModule.InvokeAsync<IJSObjectReference>("initializeFilePaste", _inputFile.Element);
    }
}

2. 重写filePaste.js的事件绑定逻辑 #

将paste事件绑定到全局document，确保无页面激活也能捕获操作：

export function initializeFilePaste(inputFile) {
    function onPaste(e) {
        // 仅处理剪贴板包含文件的情况
        if (e.clipboardData.files.length > 0) {
            e.preventDefault(); // 阻止默认行为，避免干扰文本粘贴等操作
            inputFile.files = e.clipboardData.files;
            const event = new Event('change', { bubbles: true });
            inputFile.dispatchEvent(event);
        }
    }

    // 全局监听paste事件
    document.addEventListener('paste', onPaste);

    return {
        dispose: () => {
            document.removeEventListener('paste', onPaste);
        }
    }
}

核心优化说明 #

• 事件绑定对象从容器元素改为document，实现全局范围的paste事件监听，无需页面激活即可捕获Ctrl+V操作。
• 增加文件数量判断和默认行为阻止，避免非文件类粘贴触发上传逻辑，同时防止干扰页面其他功能。
• 保留原有InputFile的change事件处理流程，确保上传逻辑与之前完全一致。

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