在 href 后给予焦点

Question

我想知道是否有办法将焦点放在本地 href

之后的 input

这就是我所拥有的：

<a href="#bottom"> Sign up </a>
And at the bottom of the page :
<div id="bottom">
<input type="email" name="email" id="email" placeholder="email address">
</div>

我想要的是，当有人点击“注册”时，它会直接进入底部页面并将焦点放在 input 上，这样用户就可以直接输入他的电子邮件地址而无需点击。

谢谢！

Answer 1

这应该可以解决问题：

已更新 HTML：向 link

添加了一个 id

<a id="signUpLink" href="#bottom"> Sign up </a>
And at the bottom of the page :
<div id="bottom">
<input type="email" name="email" id="email" placeholder="email address">
</div>

jQuery/JavaScript

$(document).ready(function(){
  var $link = $("#signUpLink");
  var $emailInput = $("#email");

  $link.on("click", function(){
      $emailInput.focus();
  });
});

这里是 fiddle： https://jsfiddle.net/yfs6nxmb/1/

Answer 2

使用像 a 样式的 label。确保 label 的 for 属性与 input 的 id 属性匹配。这将在单击 label 时聚焦 input 并滚动页面以便 input 可见。

.input-link {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

.input-link:hover,
.input-link:focus {
  color: red;
}

p {
  height: 100vh;
}

<label class="input-link" for="email">Sign up</label>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae dolorum atque, eaque, modi ducimus commodi iure officia reprehenderit eius quasi eligendi natus aliquam dolore recusandae nobis. Perferendis inventore ea quisquam.</p>
<div id="bottom">
<input type="email" name="email" id="email" placeholder="email address">
</div>

在 href 后给予焦点

Giving focus after a href

html

css

focus