CODEWITHSUNDEEP
htmlcssfocus
Difender
Difender

Reputation: 525

Giving focus after a href

I want to know if there is a way to give the focus to an input after a local href

Like here's what I have :

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

What I want is when someone clics on the Sign Up it goes directly to the bottom page and gives focus to the input so the user can directly type his email address whitout having to clic.

Thanks !

Upvotes: 4

Views: 11811

Answers (2)

Jacob
Jacob

Reputation: 2154

Use a label styled like an a. Make sure the label's for attribute matches the input's id attribute. This will focus the input when the label is clicked and scroll the page so the input is in 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>

Upvotes: 4

Daniel Siebert
Daniel Siebert

Reputation: 378

This should do the trick:

Updated HTML: Added an id to the link

<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();
  });
});

and here is the fiddle: https://jsfiddle.net/yfs6nxmb/1/

Upvotes: 1

Related Questions