0

This question has been asked in different formats, but I cannot get any answer to work in my case.

I am using vanilla javascript to set focus on a specific input field so that when someone clicks on an element on the navbar, it sets focus on the input field and moves the cursor there. I have tried using .focus() method but that does not apply here.

To provide some context, I am using Django and implementing template inheritance

app.js

var newlsetter = document.querySelector('#newsletter');
newlsetter.addEventListener("click", activateNewsletterInput);
function activateNewsletterInput() {
  document.querySelector('#sg_email').focus();
}

sidebar.html

...
<li class="nav-item close_side" id="newsletter">
  <a class="nav-link" href="#footer">Newsletter</a>
</li>
...

footer.html

...
<form id="sg-widget" data-token="" onsubmit="return false;">
  <label class="text-white mb-3">Receive our newsletter:</label>
  <div class="input-group">
    <input id="sg_email" type="email" name="sg_email" class="form-control pl-2 w-md-100 mb-sm-2" placeholder="E-mail" required="required"> 
    <button type="submit" id="sg-submit-btn" class="btn px-4 w-md-100">
      Subscribe
    </button>
  </div>
  <div class="sg-response mt-2" id="sg-response"></div>
</form>
...
Newton Karanu
  • 187
  • 18
  • Are you sure the code is running **after** the input element is in the document? E.g. inside a *load* listener or script element at the bottom of the body. Converting your code to a runnable snippet and putting the code after the element "works". – RobG Dec 02 '19 at 03:18
  • @RobG How would you implement that when the input element and the element that triggers the code are in separate files? – Newton Karanu Dec 02 '19 at 04:01
  • The simplest solution is probably to move the script element that loads the script to just before the closing body tag. – RobG Dec 02 '19 at 23:06

1 Answers1

1

(() => {
  const newsletter = document.querySelector('#newsletter');
  const activateNewsletterInput = ({
    target: targetElement
  }) => {
    if (targetElement.id === 'newsletter' || targetElement.id === 'linkNewsletter') {
      document.querySelector('#sg_email').focus();
    }
  }
  document.addEventListener("click", activateNewsletterInput, false)

})()
<body>
  <li class="nav-item close_side" id="newsletter">
    <a class="nav-link" id="linkNewsletter" href="#footer">Newsletter</a>
  </li>
  <form id="sg-widget" data-token="" onsubmit="return false;">
    <label class="text-white mb-3">Receive our newsletter:</label>
    <div class="input-group">
      <input id="sg_email" type="email" name="sg_email" class="form-control pl-2 w-md-100 mb-sm-2" placeholder="E-mail" required="required">
      <button type="submit" id="sg-submit-btn" class="btn px-4 w-md-100">
        Subscribe
      </button>
    </div>
    <div class="sg-response mt-2" id="sg-response"></div>
  </form>
</body>

(() => {
  const newsletter = document.querySelector('#newsletter');
  const activateNewsletterInput = () => document.querySelector('#sg_email').focus();
  newsletter.addEventListener("click", activateNewsletterInput, false)
})()
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>App</title>
</head>

<!-- Don't refer to your code before the body of the html -->

<body>
  <li class="nav-item close_side" id="newsletter">
    <a class="nav-link" href="#footer">Newsletter</a>
  </li>
  <form id="sg-widget" data-token="" onsubmit="return false;">
    <label class="text-white mb-3">Receive our newsletter:</label>
    <div class="input-group">
      <input id="sg_email" type="email" name="sg_email" class="form-control pl-2 w-md-100 mb-sm-2" placeholder="E-mail" required="required">
      <button type="submit" id="sg-submit-btn" class="btn px-4 w-md-100">
        Subscribe
      </button>
    </div>
    <div class="sg-response mt-2" id="sg-response"></div>
  </form>
</body>
<!-- Reference your code after the body of the html -->

</html>
You're certainly referencing your code before the HTML is drawn, so it can't find the HTML control and doesn't link the focus event. Try to reference your code after HTML is drawn.
devmiguelopz
  • 121
  • 5