单击链接并转到输入

Question

我想建立一个输入链接.我当前的链接示例有效(将我带到设置了id的区域),但我真正想要的是当用户点击链接将他完全带到输入时,能够立即输入.

<input type="text" id="search" name="search">

<a href="#search">
<img src="http://www.example.com/images/something.jpg" alt="">
</a>

没有JQuery/JavaScript,这甚至可以实现吗？请以您能想象的任何方式发布解决方案.一直在寻找这个,但找不到答案.

Answer 1

无需使用javascript:使用a label而不是for属性的链接

<input type="text" id="search" name="search">

<label for="search">
   <img src="http://www.example.com/images/something.jpg" alt="something">
</label>

如果你还需要一个平滑的页面滚动动画,为了达到输入元素的顶部偏移量,你可以改为使用一个脚本,例如

Codepen示例:http://codepen.io/anon/pen/VLyOqg

$(function() {
   $('label[for]').on('click', function(evt) {

      evt.preventDefault();
      var inputId = "#" + $(this).attr('for');

      $('html:not(:animated), body:not(:animated)').animate({
          scrollTop: $(inputId).offset().top
      }, 600, function() {
          $(inputId).focus();
      });
   });
});