Auto Focus in Search Form

This code snippet is to create an auto focus function in the search form when the search button is clicked.
Share:
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Auto Focus in Search Form
Table Of Content:
Related Article
Updated: 19 May 2022

This code snippet is to create an auto focus function in the search form when the search button is clicked. In the code sample below, the search button has the id #search_icon.

I use this code on the Digitalizer My ID website. There is a slight modification so that I can put it in the javascript tab of the Code Block Oxygen Builder component or adding to WP enqueue script.

jQuery(function($){
        jQuery('#search_icon').on('click', function(){
                setTimeout(function() {jQuery('#s').focus();}, 1000);
        });
});

If you want to autofocus on page load, you can use this snippet:

setInterval(function(){
   if(jQuery('.search_form input').length>0){
      jQuery('.search_form input').focus().val();
      return false;
   }
 }, 500);

Please note you need to change ID, class or tag associated your case.

Leave a Reply

Your email address will not be published.

Related Article

Adding Meta Author
Adding Meta Author in WordPress
class active in navigation
Adding active class to active navigation with jQuery
Code snippet to add active class to active navigation menu.
Navigation Menu
Code (Function) to bring up the menu list in WordPress
COMPLETE PACKAGE OF WEBSITE DESIGN & DEVELOPMENT
Digitalizer offers website design & development services for company profiles, online shops, event organizers, educational institutions or other fields. You don't need to think about domains, web hosting / servers, DNS, email, design, development, security and other technical issues. Just prepare your website content, we do the rest.
All website design & development packages include 1 year maintenance!
Free Consultation
Back to top
cross