CODEWITHSUNDEEP
javascripthtmljquery
emily33
emily33

Reputation: 25

toggle input field on an anchor click

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>

Upvotes: 2

Views: 251

Answers (2)

KooiInc
KooiInc

Reputation: 122906

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>

Upvotes: 1

sanepete
sanepete

Reputation: 1120

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.

Upvotes: 0

Related Questions