“自动对焦”对于我的按钮没有按预期工作。可能是什么问题？

Question

我有一个 Blazor 服务器端应用程序，带有多个主页。每个主页都有一些可以通过按钮进入的子页面。如果在主页中打开一个子页面，然后导航到另一个主页，最后导航回同一主页，我最后打开的子页面将按预期打开。但只缺少一件事：相关的子页面按钮应该再次重新聚焦，以便用户可以了解他正在登陆哪个子页面。

因此，我为每个子页面按钮定义了“自动对焦”选项，并且根据上次打开的子页面，我刚刚将相关的自动对焦变量设置为 true （所有其他变量设置为 false）。但相关的子页面按钮仍然没有按照 css 中的定义突出显示。可能是什么问题？

我的剃须刀页面代码：

 ...
 <button class="icon-button" autofocus="@focus_sub1" @onclick="Function_sub1">sub1                    
 </button>
 <button class="icon-button" autofocus="@focus_sub2" @onclick="Function_sub2">sub2                    
 </button>
 <button class="icon-button" autofocus="@focus_sub3" @onclick="Function_sub3">sub3                    
 </button>
 ...

我的剃须刀cs页面：

  public bool focus_sub1=false;
  public bool focus_sub2=false;
  public bool focus_sub3=false;
  public string selected_page="";

  protected override void OnInitialized()
  {         
        switch (selected_page)
        {
            case "sub1":
                focus_sub1 = true;
                focus_sub2 = false;
                focus_sub3 = false;
                break;
            case "sub2":
                focus_sub1 = false;
                focus_sub2 = true;
                focus_sub3 = false;
                break;
            case "sub3":
                focus_sub1 = false;
                focus_sub2 = false;
                focus_sub3 = true;
                break;
            default:
                // code block
                break;
        }

  }


  public void Function_sub1 ()
  { 
     selected_page= "sub1"
     // rest code
  }
  public void Function_sub2 ()
  { 
     selected_page= "sub2"
     // rest code
  }
  public void Function_sub3 ()
  { 
     selected_page= "sub3"
     // rest code
  }

我的CSS定义：

/* normal button */
.icon-button{        
    color: black;       
}   

/* highlighted button when subpage selected */
 .icon-button:focus {
    color: blue;
    font-weight: bold;
}

Answer 1

在 Blazor 中，HTML 自动对焦仅在元素首次在 DOM 中呈现时才起作用。页面加载后，仅在 blazor 中动态设置自动焦点不会将自动焦点带回按钮，因为自动焦点不是 html 中的可重新聚焦属性。您需要使用 JavaScript 来动态地关注按钮。在您的 wwwroot/index.html 中添加此 JS 函数来聚焦元素

<script>
    window.setFocus = function(element) {
        if (element) {
            element.focus();
        }
    }
</script>

这应该有效