Estoy tratando de hacer que cuando el usuario haga clic en "Enlace", se desplace hacia abajo hasta el campo de entrada "a" y lo cambie sin tener que hacer clic. Ya estoy usando jQuery, por lo que quizás también debería manejar el desplazamiento, sin embargo, no estoy seguro de cómo lidiar con alternar (tal vez enfocarse en la terminología correcta) un campo de entrada automáticamente. Nota: Omití todos los demás códigos para mejorar la legibilidad.
<a href="#view" class="button">Link</a> <div id="view"> <input type="text" id="a" name="a"> </div>No estoy seguro de lo que quiere decir con 'alternar', pero puede usar el focus para mover el cursor (adentro) al campo de entrada. Aquí hay un fragmento donde el campo de entrada está fuera de la vista. El manejo se realiza mediante delegación de eventos .
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>Agregue una etiqueta de ancla vacía:
<div id="view"> <input type="text" id="a" name="a"> <a name="myawesomeanchour"></a> </div>luego agregue el controlador de eventos al botón 'Enlace':
var myawesometag = $("a[name='myawesomeanchour']"); $('html,body').animate({scrollTop:myawesometag.offset().top},'slow'); $('#a').toggle();elimine la línea de alternancia si la alternancia aún no es necesaria.