How to give focus on specific div class on page load?

Question

I want to set .focus(); on specific <div> on user action. This action will reload the page and after reload I want to set focus this <div>.

NOTE: I could have added HTML but thought screen shot will be much easier.

Following is my HTML structure:

I tried following but none of these works:

    //option - 1
    $(".cart-panel .pickup-delivery-time .cart-msg").focus();
    //option - 2
    $(".pickup-delivery-time .later").find(".cart-msg").focus();
    //option - 3
    window.location.hash = '.cart-msg';

Full Code:

$(document).on("click", "#map-delivery-addresses button", function() {
  $.publish('delivery_address_selected', { address: this });

  if (!$(".cart-msg").is(":focus")) {
    $(".cart-panel .pickup-delivery-time .cart-msg").focus();
  }

});

What am I missing here?

Can you post your js for focusing? the more complete version of the js. If your element has tabindex then something like this should work. How did you check if the element is focused or not? — Huangism, Jan 18 '18 at 20:25
Possible duplicate of [Is it possible to focus on a
using JavaScript focus() function?](https://stackoverflow.com/questions/3656467/is-it-possible-to-focus-on-a-div-using-javascript-focus-function) — Daniel Beck, Jan 18 '18 at 20:26
And see also https://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus — Daniel Beck, Jan 18 '18 at 20:27
@Huangism Here is the code. `$(document).on("click", "#map-delivery-addresses button", function() { $.publish('delivery_address_selected', { address: this }); if (!$(".cart-msg").is(":focus")) { $(".cart-panel .pickup-delivery-time .cart-msg").focus(); } });` — GThree, Jan 18 '18 at 20:34
@CSharper you can edit the question and put the code in there — Huangism, Jan 18 '18 at 20:36
@CSharper it looks like you are trying to set focus inside of the click function. If this function reloads the page then it is no wonder nothing is focused. Js is client side and if a page reloads so does the js, so that focus function basically will never execute, well it executes but the page reloads so you won't see anything — Huangism, Jan 18 '18 at 20:40
@Huangism Ah I see. That make sense. Thank you for explanation. — GThree, Jan 18 '18 at 21:04
@CSharper also see the answer about different focus() between js and jquery — Huangism, Jan 18 '18 at 21:21

score 0 · Answer 1 · answered Jan 18 '18 at 21:18

The jQuery focus is not the same as the Javascript focus. The former fires an event but the latter will place the element in focus.

document.getElementById('second').focus()

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input id="first" placeholder="First"></input>
  <input id="second" placeholder="Second"></input>
  <input id="third" placeholder="Third"></input>
</body>
</html>

This code works for inputs, however what behaviour are you expecting once the div is focused? It may not be perceptible.

You can set focus on div the same way you are doing for input, the div just needs `tabindex="0"` — Huangism, Jan 18 '18 at 21:30

score 0 · Answer 2 · answered Jan 18 '18 at 21:24

0

You want to wait for the document to be ready first:

$(document).ready(function()
    {
         jQuery("div#name").focus();
    });

It won't work 100% of the time, but 99.9% is probably good enough. There are things that can happen that will steal the focus and not much you can do about it.

If you have a complicated UI you want to better integrate that focus() call to that environment.

answered Jan 18 '18 at 21:24

Alexis Wilke

19,179
10
84
156

The OP wants to set focus on an element not trigger the focus event – Huangism Jan 18 '18 at 21:27
That's what calling `focus()` does. It works for me on `
` or whatever other tag.
– Alexis Wilke Jan 19 '18 at 03:30

How to give focus on specific div class on page load?

2 Answers2