After hovering, move the cursor into the input field

I currently have a form that is hidden by default using display:none. When I hover over another link, the form becomes visible. Is there a way to automatically place the cursor in the input field when this happens using CSS?

If I change the form's display property to inline-block directly, the cursor is automatically placed in the input field.

This is my CSS:

.search-bar {
    display: none;
 }

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

This is the code for my Form in the HTML file:

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

Answer №1

One way to achieve automatic focus in HTML is by using the HTML5 auto focus attribute

Here's an example:

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

An alternative method is to utilize JQuery for achieving this with the focus() function

JavaScript:

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

This solution may not be effective in Firefox, but it works well in Safari

Answer №2

In order to achieve the desired functionality, it seems like implementing client-side scripting such as Javascript or JQuery may be necessary.

On the other hand, if you are looking to avoid client-side scripting and solely rely on html5, exploring the use of the "autofocus" attribute in html5 would be beneficial. Check out the main solution provided in this article.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a problem where Visual Studio 2008 IDE freezes or crashes when attempting to open a .aspx file that contains

While using Visual Studio (SP1), everything works perfectly until I attempt to view .aspx source files containing the lines <style type="text/css> </stlye> Once those lines are present, it freezes and becomes unresponsive, forcing me ...

asp.netcssvisual-studiovisual-studio-2008crash

modify brand information through the use of javascript and customizable settings

In the default setting, I want all product details to be displayed. If the option value matches the product's brand name (b_name), then I want to display the corresponding details. Let's consider a list of products with their details: Samsung ...

javascripthtmlangularreactjs

View a pink map on Openlayers 2 using an iPhone

I am currently working on a project where I am trying to track my location using my smartphone and display it on a map. To achieve this, I am utilizing openlayers 2. However, I am encountering an issue. When I implement the code below in a Chrome Browser ...

javascripthtmlopenlayers

Choose a personalized option from a dropdown menu using Selenium and Python

I am currently attempting to programmatically choose an option from a dropdown menu using Python and Selenium. The dropdown contains various values ranging from 1 to 11. Users are expected to interact with the dropdown, select a value between 1 and 11, and ...

pythonhtmlseleniumdrop-down-menudropdown

The Bootstrap 4 navbar experiences content displacement when collapsed, shifting below the brand logo

My goal is to create a double navbar using the latest version of Bootstrap 4 (alpha6). http://codepen.io/anon/pen/qrERBP <nav class="navbar navbar-toggleable-md navbar-light navbar-inverse bg-faded" style="background-color: #000000"> <butto ...

htmlcssnavbarbootstrap-4twitter-bootstrap-4

Optimal Strategy: Utilizing Spring Boot for Backend Development and jQuery for Frontend Interface

I am currently tackling a project that involves a Spring Boot 2 Backend and a jQuery Frontend. The frontend communicates with the backend by sending Ajax requests to Spring REST controllers in order to interact with database entities. One of the challenge ...

javascriptjavahtmljsonajax

Designing a personalized confirmation pop-up following the submission of an AJAX form

I am currently utilizing the AJAX JQuery validation plugin to submit a form. Below is a snippet of the code: $(document).ready(function(){ $("#myform").validate({ debug: false, rules: { fname: {required: true}, sname: {required: t ...

phpjavascriptjquerycssajax

Show a DialogBox taking up the entire screen

In my HTML page, I have implemented a frameset with two frames. The first frame contains a button that, when clicked, displays a dialog box. However, the issue is that the dialog box only appears in the top frame and not on the entire screen. Is there a wa ...

javascriptjqueryhtml

a pair of browser windows displaying a web application built with ASP.NET MVC

We are currently in the process of developing an ASP.NET MVC web application for internal use within our organization. Our users' productivity can greatly benefit from having a larger screen space, which is why we have decided to provide each user wit ...

c#javascripthtmlasp.net-mvc

My jQuery carousel seems to be malfunctioning. Check out the issue here on JSFiddle

I found this amazing resource for jQuery carousel functionality: If you'd like to see it in action, check out the JSFiddle demo I created: http://jsfiddle.net/svQpc/ However, I've encountered a small issue with the Horizontal version of the car ...

jqueryhtmlcss

Toggle the sidebars to slide out and expand the content division using JavaScript

I am looking to achieve a smooth sliding out effect for my sidebars while expanding the width of the middle content div. I want this action to be toggled back to its original state with another click. Here's what I've attempted so far: $(' ...

javascriptjqueryhtmlcss

How can I show the HTML text "<ahref>" in a UITextView on iOS?

Is there a way to show HTML tags like <a> in a textview? As an example, here is some code: Hello good morning <a href=\"1\">USER1</a> and <a href=\"13\">USER2</a> ...

htmliosattributestextview

When converting the .html file to a .php file, the CSS file fails to be linked correctly

The issue I'm facing seems to be specific to the index.html file. The CSS that functions properly with an html extension suddenly stops working when the extension is changed to php. Upon inspecting the reference link in both cases, I noticed that when ...

phphtmlcsszurb-foundation

What is the best way to combine two PHP JSON files into one for an autocomplete feature?

I am facing a challenge with merging two JSON files into one. The issue arises as the first JSON input displays image file names with previews, while the second input only shows text file names. How can these JSON files be integrated into a single file? P ...

phpjqueryhtmljson

How to fix a sticky Jquery Image Hover issue

Having some trouble creating jQuery hover effects for images. My code doesn't seem to be working as expected and I'm not getting any output. Here's the code I have so far, hoping someone can lend a hand... gallery.html <html> <he ...

javascriptjquerycss

tag assistance for incorporating an attribute without a value

Trying to create: <div data-dropdown-content class="f-dropdown content"> using the tag helper. It seems there is no specific syntax for attributes without values <%= tag(:div, :class => "f-dropdown content", data: {dropdown-content: ""}, :& ...

htmlruby-on-rails-4.2

Incorporating blur.js into an AngularJS project

Attempting to create a blurred background effect with Angular on a div, similar to the image above. I am using blur.js and it works well with jQuery. My main question is, can this be achieved with AngularJS and what is the best approach? I am new to Angul ...

javascriptjqueryhtmlangularjs

Formatting a contact form to display information in an email

I'm interested in finding ways to customize the appearance of contact form results that are emailed to me. I want the information submitted through the contact form to be presented in a visually appealing manner when it reaches my inbox. Below is a s ...

phpcssformsemailstyles

Adjust the container width to match the width of the visible thumbnails?

Take a look at my website over at: . If you want to see more thumbnails, consider switching to a different album. The album titled Paris contains the most images. If you press the "Show Photo Grid" button located in the bottom-right corner, you'll be ...

htmlcssthumbnails

I am experiencing an issue where tapping on the Status Bar in MobileSafari is not functioning correctly on a specific

I am struggling to troubleshoot this problem with no success so far. The HTML5 JavaScript library I'm developing has a test page that can display a large amount of output by piping console.log and exceptions into the DOM for easy inspection on mobile ...

javascriptioshtmlsafarimobile-safari