Autofocus Search Input Field

  • Resolved kayamurer

    (@kayamurer)


    4 years, 3 months ago

    Is there any way to have the search field selected directly when opening the modal window? This way the user has to make one click less and can search directly after opening the modal window. I already tried it with the HTML5 attribute “autofocus”, but unfortunately it did not work.

    Thank’s for this great plugin!

    • This topic was modified 4 years, 3 months ago by kayamurer.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Jon Christopher

    (@jchristopher)

    4 years, 3 months ago

    Hi there! The input should be focused by default, but if that’s not working for you version 0.3 has been released which adds jQuery events that fire when modals are open.

    Once you’ve updated you can use this to focus the first input in the template:

    jQuery('body').on('searchwpModalOnShow', function(e) {
    // Focus an input in the template.
    e.el.find('input').focus();
});

    Enjoy!

    Thread Starter kayamurer

    (@kayamurer)

    4 years, 3 months ago

    Hi Jonathan.

    I just updated the plugin and tried the jQuery Code. It is working if i make the following adjustments (I guess it’s just for my setup):

    jQuery(function($){
    $("body").on("searchwpModalOnShow", function(e) {
        // Focus an input in the template.
        e.el.find("input").focus();
    });
});

    It is working with the default template but not with my custom template named “Custom”.
    What piece of code do i need to change to get it working with custom templates?

    Thanks for your previous answer and great support 🙂

    • This reply was modified 4 years, 3 months ago by kayamurer.
    • This reply was modified 4 years, 3 months ago by kayamurer.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Autofocus Search Input Field’ is closed to new replies.