相关疑难解决方法(0)

使用Microsoft docs 中的示例，我尝试以编程方式将焦点设置为输入元素。

不幸的是，该示例使用了标准，<input type="text">而我想将其用于InputTextelement。

Microsoft 示例使用了一种扩展方法，该方法采用ElementReference：

public static Task Focus(this ElementReference elementRef, IJSRuntime jsRuntime)
{
    return jsRuntime.InvokeAsync<object>(
        "exampleJsFunctions.focusElement", 
        elementRef);
}

使用InputText，我认为无法获得这样的ElementReference.

提供我自己的Focus()重载InputText而不是编译但没有显示视觉结果。所以我一无所知。

我的问题

如何以编程方式将焦点设置为InputText元素？

在我的Blazor server-side项目中，我需要通过在菜单外单击来关闭弹出菜单。我使用一个简单的If语句通过触发onClick事件来显示/隐藏弹出窗口。但是没有这样的事件可以通过在弹出菜单外单击来关闭弹出窗口。所以用户应该只通过点击带有onClick事件的元素来关闭它。所以我的问题是我们如何在不使用的情况下更好地解决这个问题JS？

先感谢您。

我无法使 .NET 6 的 Blazor AsyncFocus 方法起作用。

据我所知，AsyncFocus 仅在组件值不为空时才起作用。该模型确保组件值不为空。

模型：

namespace BlazorAppWithService.Models;

public class TagModel
{
    public string? TagName { get; set; } = "";
}

Blazor 标记：

<EditForm Model="@newTag" OnValidSubmit="AddTag">
    <InputText @ref="ele "@bind-Value="newTag.TagName"></InputText>
    <button type="submit">Add tag</button>
</EditForm>

这段代码：

@code {
    InputText ele;

    private List<TagModel> tagList = new List<TagModel>();

    private TagModel newTag = new TagModel();


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender) 
            if (ele.Element != null)
                await ele.Element.Value.FocusAsync();
    }

    private async void AddTag()
    {
        tagList.Add(newTag);
        newTag = new …

我希望能够在Blazor中不使用HTML INPUT标记的情况下捕获键盘输入。按下键后，我将显示一个图形来代表按下的字母。

像这样

@page "/counter"
@using Microsoft.AspNetCore.Components.Web

<div @onkeypress="e => KeyPress(e)">
    Press any letter key
</div>

@code {

    private void KeyPress(KeyboardEventArgs e)
    {
        var letter = e.Key;
    }
}

当我在其上设置断点时，似乎没有调用KeyPress方法。任何帮助，不胜感激。