There's no focus effect when using ajax to embed html into current page and set focus

Question

I'm developing asp.net core and test in Edge browser(version: 96.0.1054.62).

I'm send ajax request and get the html content, then I embedded the html block into current page. After that, I set focus on the html elment in the html block. But I cannot see the focus effect when I call the setFcous function.

In general, when I set focus on one elment, it will have black border wrap it like fhe following.

The following is the code sample:

Index.cshtml

HomeController.cs

Delete.cshtml

Sorry, I have to post screenshot of the code here, because when I post the html and js code here, the site tell me that I cannot access to post question here. I do not know why.

Answer 1

Hi @Xie Steven ,

I'm send ajax request and get the html content, then I embedded the html block into current page. After that, I set focus on the html elment in the html block. But I cannot see the focus effect when I call the setFcous function.

In general, when I set focus on one elment, it will have black border wrap it like fhe following.

This seems like a default behavior. In general, when we use "Tab" key to focus on a button, it will have a black border, but if we focus on the button via the focus() method. There is no black border. I check your code using Edge and Chrome browser, it will show the same behavior.

To show the black border when using the focus() method, as a workaround, you could add the CSS style in the Index.cshtml page to show the border, like this:

  <style>  
    .button:focus {   
      border:solid;  
    }  
</style>  

The result:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

when you update the dom, you generally need to wait for it to be actually rendered, before you can set focus. that is you need to run a window loop. you usually do this by setting the set focus code in a timer.

setTimeout(function() {
     document.getElementById("theid").focus();
});