hasFocus() verification in <a> tag

Asked

Viewed 37 times

1

Hello, good afternoon :) I have the following HTML code:

<section class="sectionQuemSomos">
   <a class="iconQuemSomos" id="QuemSomos">
     <img class="img-fluid" style="height: 80px" src="assets/img/icos/Icone_Quemsomos.png">
   </a>
</section>

and the following JS code:

$(document).ready(function() {
    "use strict";
    var quemSomos = document.getElementById("QuemSomos");

  $(document).addEventListener('focus', function(){
    if (quemSomos === document.activeElement){
    alert("efds");
    }
  });
});

As simple as it sounds, I’m not getting this if check back true and into your code block. I click on the tag to give it the focus but no Lert is displayed, so I know it’s not working that check.

I am trying to implement this eventListener so that this verification can take place after the document is ready.

Thank you for your attention!

javascript html

  • Try it like this: if ($(quemSomos).is(":focus")){

  • didn’t work out =\

  • You want to check if you focus on page loading. This doesn’t work. You have to use some event.

  • yeah. I’m thinking about it right now... you know how I could use this event?

  • well, now you’ve changed the question and the answers have become meaningless, you should put a note saying that you edited, because you put the suggestion of my answer, there it seems that I answered without reading your question :P

  • Sorry! I don’t have much custom with this "forum" . hauhusa my fault!

Show 1 more comment

2 answers

1

hasFocus() is an object method document: Developer.mozilla.org/Document/hasFocus

To check in javascript if an element has Focus, compare with the element in document.activeElement, which returns the current element with Focus:

var quemSomos = document.getElementById("QuemSomos");
if (quemSomos === document.activeElement){
    alert("foco");
}

If you prefer to use jQuery, can validate like this:

if ($('#QuemSomos').is(":focus")){
    alert("foco");
}

  • no results. only one question: the <a> by nature tag gains focus when you click it, right?

  • But one question about your code: is it in the block $(document).ready means that once the document is ready, the Focus has to be in the "Whowe" element. Does anything make the Focus go there? Otherwise it will never return true, and then what is not the if but the flow of the page

  • Yes but it should be an instant, because the link (tag <a>) will already direct to another page or another location

1


You will not be able to do this check when loading the page with the element <a>, for he is not self-focusable nor focusable without the attribute href.

I see no reason to use the tag a this way, without being a clickable link, but if that’s what you want, you have to use the attribute tabindex so that the element becomes focusable:

<a class="iconQuemSomos" id="QuemSomos" tabindex="0">

This way you can detect focus using the event focus:

$(document).ready(function() {
   "use strict";
   $("#QuemSomos").on("focus",function(){
      console.log("foco");
   });
});

  • It worked! the idea is to have an image where the user will be able to click on it and some event will occur with it but I did not know how to deal with this click on the image but knew that I could work with Focus in the <a> tag but I did not know that it becomes non-transferable in the absence of href

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.