Setting focus fails

Question

Not an expert, so I am trying to understand why this condition fails. I want it to set focus on .alert-focus if the css classes are present in the page, otherwise if they are not it should set focus on #maincontent. However it never ends up setting focus on #maincontent.

here is my code:

$(function() {
    if ($('body .alert, body .success, body .warning').length) {
        $('.alert-focus').focus();
    } else  {
        $('#maincontent').focus();
    }
});

<a id="maincontent" tabindex="-1" name="maincontent"></a>

Without seeing your markup, my guess would be that there's no `tabindex` on `#maincontent` — James Long, Feb 21 '18 at 15:26
Anchor tag does not need tabindex to be focused by js, try adding href to the anchor and see if that works — Huangism, Feb 21 '18 at 15:27
Your code works, put some text in the link and you see that it has an outline of a focused link on document ready. Also please note in html5 the name attribute is obsolete on an anchor and shouldn't be used: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a — Pete, Feb 21 '18 at 15:31
This is a duplicate post by the same author: https://stackoverflow.com/questions/32569543/focus-on-page-not-working — Morten Hekkvang, Feb 21 '18 at 16:12

score 0 · Answer 1 · answered Feb 21 '18 at 15:30

Your code does work as long as there is some content inside the <a> element to show.

The example below shows this by adding a CSS rule that only applies to maincontent when it has the focus.

$(function() {
    if ($('body .alert, body .success, body .warning').length) {
        $('.alert-focus').focus();
    } else  {
        $('#maincontent').focus();
    }
});

/* If you see a yellow background, the element has the focus! */
#maincontent:focus { background-color:yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- If an element doesn't have any content, then there's nothing to see.
     You have to give the element something to be marked up. -->
<a id="maincontent" tabindex="-1" name="maincontent">test</a>

Hmm even with the content inside the element it wont trigger. However it will do it for the IF part, meaning the ELSE is still never triggered. — zemaker, Feb 21 '18 at 15:38
@zemaker Have you tried the code snippet I supplied in this answer? The `else `gets triggered every time because the `if` condition is always `false`. — Scott Marcus, Feb 21 '18 at 15:53

Setting focus fails

1 Answers1