CODEWITHSUNDEEP
csshtml
craphunter
craphunter

Reputation: 981

Put cursor in input field after hover

I have a form that is display:none and when I am going to hover on a another link, then the form comes up. How can I put the cursor into the input field? Is there a way to do it in css?

If I make the form to display:inline-block directly, the cursor is in the input field.

My CSS:

.search-bar {
    display: none;
 }

 #main-nav a:hover .search-bar {
     display: inline-block;
 }

My Form in the html file:

<input id="search_search" type="text" autofocus="autofocus" placeholder="Placeholder.Search.Main" name="search[search]"></input>

Upvotes: 0

Views: 1754

Answers (2)

imbondbaby
imbondbaby

Reputation: 6411

We can use HTML5 auto focus attribute

For Example:

<input type="text" name="name" id="search_search" placeholder="Placeholder.Search.Main" name="search[search]" />

We can use JQuery to do this using foxus()

Javascript:

$("#show").hover(function(){
    $("#search_search").show();
    $("#search_search").focus();
});

Doesn't work in Firefox but works in Safari

Upvotes: 1

The Velcromancer
The Velcromancer

Reputation: 447

I think you might be looking for some client-side scripting (Javascript or javascript with JQuery).

If you don't want to accomplish this through client-side scripting, and only want to support html5, then you should take a look into the "autofocus" attribute of html5. See the top answer to this post.

Upvotes: 1

Related Questions