How to use jQuery when you click on the link to select input?

The membership is not particularly important, at the end of a short written

There is a structure
<div class="search">
 <input type="text" name="search" class="search_field">
 <a class="search_but"></a>
</div>
Is the code
$(document).ready(function() {
$('.search_but').click(function(){
 $('.search').toggleClass('search_w', 500, 'easeInQuad');
});
});
Works like this:
When the page loads there is a simple button .search_but
Upon clicking it, div.search becomes wider (assigned class), and you receive input. This is done with CSS
.search_w .search_field {
 height: 27px;
 margin-left: 6px;
 width: 149px;
border:none;
 outline: none;
 background: transparent;
 color: #444649;
}

.search_field {
 width: 0px;
border:none;
 outline: none;
 background: transparent;
 float: left;
 color: transparent;
}

It all works fine. The problem with that would be when you click on the button (and thus with the appearance of the input) it has got the focus, i.e., it can be just to type text without the need to poke him.

As you can already guess, connected jQuery UI ;)

Thought so:
$('.search_field').select();But text, not the input (although this is not critical as it is for me) and also pressing (that is, hiding the input) the text is again highlighted.

Who didn't read:How, using jQuery UI to highlight input when you click the button?

Are there any suggestions? =)
September 26th 19 at 06:11
2 answers
September 26th 19 at 06:13
Solution
A reference to <label></label> and change everything. And prescribe it the attribute for="Name input"
And there are no other options? :( - Princess commented on September 26th 19 at 06:16
Besides, your method does not work =\ - Princess commented on September 26th 19 at 06:19
Sorry, missed the error :) Yes, it works, thanks =) - Princess commented on September 26th 19 at 06:22
view my option, if not satisfied with label - tanner_Wintheis commented on September 26th 19 at 06:25
September 26th 19 at 06:15
Solution
$('.search_field').focus();
codepen.io/iiil/pen/FLHia
Thank you, choose this option :) - Princess commented on September 26th 19 at 06:18

Find more questions by tags jQuery