在href之后给予焦点答案

【问题标题】：Giving focus after a href在href之后给予焦点
【发布时间】：2016-02-16 15:20:24
【问题描述】：

我想知道在本地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 上，这样用户就可以直接输入他的电子邮件地址而无需点击。

谢谢！

【问题讨论】：

CSS 可以检测到焦点但不能设置它。为此，您需要 JavaScript。
做<a href="#email">Sign up</a>
@GCyrillus ：它什么也没做。
哎呀，你说得对，我读得太快了，一旦锁定底部，你需要 javascript 来触发焦点

标签： html css focus

【解决方案1】：

使用样式类似于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>

【讨论】：

非常感谢！正是我想要的！

【解决方案2】：

这应该可以解决问题：

更新 HTML：向链接添加了 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();
  });
});

这是小提琴： https://jsfiddle.net/yfs6nxmb/1/

【讨论】：