0

我正在尝试创建一个表格，当您单击一行时，会显示一个下拉列表。我能够检测到点击正常。但是，我希望能够单击屏幕上的其他任何位置以返回到不可编辑的版本。

问题是，当我使用@onfocusous 时，它只有在我单击行中但在下拉列表之外时才有效。我希望能够单击页面上不是下拉菜单的任何位置以切换回来。

这是我拥有的 HTML。

<td class="@(isDropdown == true ? "hide" : "")" @onclick="BeginEdit">
    This is a test
</td>
<td class="@(isDropdown == true ? "" : "hide")" 
@onfocusout="StopEdit" id="dropdown" @onfocusout="StopEdit">
    <div class="input-group input-group-sm mb-3">
        <BlazoredTypeahead SearchMethod="search.blah"
                            @bind-Value="@variable"
                            EnableDropDown="true"
                            Debounce="500">
            <SelectedTemplate Context="ctx">
                 @ctx
            </SelectedTemplate>
            <ResultTemplate Context="ctx">
                @ctx
            </ResultTemplate>
        </BlazoredTypeahead>
     </div>
</td>

我猜我需要 javascript 来做到这一点，但我从未使用过 javascript 或知道如何使用互操作，所以任何帮助都会很棒。

4

1 回答 1

0

为了使 td 元素失去焦点，首先需要将其设置为焦点。这是通过将 tabindex 属性设置为“0”来实现的；

试试这个代码：

<td class="@(isDropdown == true ? "" : "hide")" 
@onfocusout="StopEdit" id="dropdown"  tabindex="0">

希望这可以帮助...

于 2019-10-30T22:46:13.837 回答