Нажмите на ссылку и войдите на вход

Question

Я бы хотел сделать ссылку на вход. Мой текущий пример ссылки работает (выводит меня в область, где установлен идентификатор), но я действительно хочу, когда пользователь нажимает на ссылку, чтобы взять его точно на вход, имея возможность сразу вводить текст.

<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: использовать 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(); 
     }); 
    }); 
}); 

Answer 2

<script> 
function setFocus(){ 
    elm = document.getElementById("search"); 
    jump(elm); 
    elm.focus(); 
} 

function jump(elm){ 
    var top = elm.offsetTop; //Getting Y of target element 
    window.scrollTo(0, top);      //Go there. 
}​ 
</script> 

...

<a href="javascript:setFocus('search')"> 
<img src="http://www.example.com/images/something.jpg" alt=""> 
</a> 

Answer 3

Использование JQuery фокус!

$('[href="#search"]').click(function(){$('#search').focus();});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="search" name="search"> 
 

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