此问题以不同的格式被提出，但是对于我的情况，我无法获得任何答案。
我正在使用香草javascript将焦点设置在特定的输入字段上，以便当某人单击导航栏上的元素时，它将焦点设置在输入字段上并将光标移动到该位置。我尝试使用.focus()方法，但不适用于此处。
为了提供一些上下文，我正在使用Django并实现模板继承
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>
...
(() => {
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>