How can I get the search form to be selected automatically?

Question

How can I get the search form to be selected automatically?

Murat Dinc

2022年4月19日 07:11

There is an icon to open the search form on my site, and when it is clicked, the search form opens in full screen. I want the search form to be selected automatically, how can I do that?

Here: https://wisekitten.com/

I'm not using jQuery in my project.

Topic css html Wordpress javascript

Category Web

Murat Dinc · Accepted Answer · 2022年4月19日 07:11

SOLUTION: I did what I wanted with these codes.

(function() {
    document.querySelector(".search-button").addEventListener("click", (e) => {
        setTimeout( function() {
            document.querySelector(".search-form-input").focus();
        }, 200);
    });
})();

Adam · Accepted Answer · 2022年4月17日 12:08

This question is more suited to being asked on Stack Overflow as it is not a WordPress specific question, but here's a solution for you anyway:

This makes no assumptions about the code controlling the existing functionality on the site, so there might be other ways that are more practical to hook into this process but for now here is an event listening that listens for a click on the "search button", then after waiting 200 miliseconds, the callback function provided to setTimeout will focus the cursor onto the input field that is shown when the search container overlays the full-screen.

!(function($){
    $(function(){
        $('.search-button').on('click', function(event) {
            setTimeout( function() {
                $('.search-form-input').focus();
            }, 200)
        });
    });
})(jQuery);

How can I get the search form to be selected automatically?

About