jquery - 单击 <a> 标签激活输入

Question

我在激活输入字段时遇到问题。

我想要的:

1. 用户向下滚动网站并想返回顶部
2. 用户点击菜单栏中的“注册”
3. 滚动到着陆页
4. 着陆页上的输入字段有焦点，表明这是他们注册的地方

这是第 4 点，我不知道该怎么做。我找到了点击标签和按钮的解决方案，但菜单栏中的“注册”是一个 a 标签。

基本上:单击菜单中的 a 标签时如何激活输入字段？

这是两个元素:

                <a id="signup-nav" class="navbar-brand page-scroll" href="#page-top" >Sign up</a>

                    <form class="pure-form fadescript">
                    <fieldset>
                        <legend>Notify me on launch</legend>

                        <input type="email" placeholder="Email me when it is ready">

                        <button type="submit" class="pure-button pure-button-primary">Send</button>
                    </fieldset>
                </form>

谢谢

Answer 1

我建议 - 假设这是您要关注的电子邮件字段 - 以下内容:

// binding a click event-handler to the element with
// the id of "signup-nav", using the on() method:
$('#signup-nav').on('click', function() {
  // selecting the relevant input, of type=email,
  // focusing that element (if the selector returns multiple
  // elements the *last* of those elements will be focused:
  $('input[type=email]').focus();
});

$('#signup-nav').on('click', function() {
  $('input[type=email]').focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="signup-nav" class="navbar-brand page-scroll" href="#page-top">Sign up</a>

<form class="pure-form fadescript">
  <fieldset>
    <legend>Notify me on launch</legend>

    <input type="email" placeholder="Email me when it is ready">

    <button type="submit" class="pure-button pure-button-primary">Send</button>
  </fieldset>
</form>

顺便说一下，我选择不使用 event.preventDefault() ，因为你 - 大概 - 仍然想滚动到特定位置；虽然即使默认操作被阻止，但关注 <input>在大多数浏览器中，仍然会将焦点元素移动到浏览器视口(viewport)的可见部分。所以它主要是可选的。

引用资料:

• CSS:
  • Attribute-equals ( [attribute=value] ) selector .
• jQuery:
  • focus() .
  • on() .