在锚点单击时切换输入字段

Question

I'm trying to make it so when the user clicks "Link" then it scrolls down to the input field "a" and toggles it without having to click. I'm already making use of jQuery so perhaps it should handle scrolling as well, however I'm unsure how to deal with toggling (perhaps focusing on is the right terminology) an input field automatically. Note: I omitted all other code for readability.

<a href="#view" class="button">Link</a>

<div id="view">
<input type="text" id="a" name="a">
</div>

Answer 1

Not sure what you mean by 'toggle', but you can use focus to move the cursor (in)to the input field. Here's a snippet where the input field is out of sight. The handling is done using event delegation .

 document.addEventListener(`click`, handle); function handle(evt) { if (evt.target.id === `view`) { // if you click from a href element, you have to prevent // the default action of the click. May be advisable to // use a button here. evt.preventDefault(); const inpVw = document.querySelector(`#a`); // focusing automatically scrolls to the field inpVw.focus(); inpVw.setAttribute(`placeholder`, `Feel free to type`); } }

 #viewInput { margin-top: 120vh; }

 <a id="view" href="#">Link</a> <p id="viewInput"> <input type="text" id="a" name="a"> </p>

Answer 2

Add an empty anchor tag:

<div id="view">
<input type="text" id="a" name="a">
<a name="myawesomeanchour"></a>
</div>

then add the event handler to the 'Link' button:

var myawesometag = $("a[name='myawesomeanchour']");
$('html,body').animate({scrollTop:myawesometag.offset().top},'slow');
$('#a').toggle();

remove the toggle line if the toggle isn't still required.