html - 在 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>

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

谢谢!

Answer 1

使用样式类似于a的标签。确保 label 的 for 属性与 input 的 id 属性匹配。单击标签时，这将使输入聚焦并滚动页面，以便输入位于 View 中。

.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>