Automatically set keyboard focus to Search box

Hi @nl_derek,

You can use OrbitFox plugin by Themeisle to activate Header/Footers scripts module that adds an ability to place scripts in the header or footer of your website. Here is documentation about it: https://docs.themeisle.com/article/1277-header-footer-scripts-orbit-fox-module

Then, place this script in the header of the newly activated area in the Customizer:

<script>
jQuery('.nv-icon.nv-search').click(function() { 
setTimeout(function() { 
jQuery('.search-field')[0].focus(); 
}, 100); 
});
</script>

This way focus should be placed in the input of the search automatically.

I hope it helps!

Thanks for your suggestion Vytis; unfortunately it doesn’t work for me, either on Windows or Android. I use “Open behavior” “Minimal” but other options (“canvas” and “float above header”) were no better.

[The items in “quotes” are my translations of the Dutch, may not be correct]

Back to the drawing-board, but thanks anyway.

— NL_Derek

Hi @nl_derek,

I tested this function on a Neve website and it worked as expected, the focus was being placed on the input of the search bar.

It’s really weird that it does not work on your end, I’m not sure if you are comfortable working with JavaScript but you can try to console.log something on function on the click function:
jQuery('.nv-icon.nv-search').click(function() {});

And check if it works on your website when you click on the search icon.

Hi Vytis, thanks for your time and help. I’m afraid it still doesn’t work. Here is what I did:
* Made a new installation with only theme 2020; the search icon worked directly (when I clicked it the search box got focus).
* Installed Neve; default it had a search widget in the right sidebar, this was a Search Form so click and focus are the same thing.
* Removed the widget; no search available.
* Appearance>Customize>Header; in the Header Builder I shrank the Primary menu and added a Search Icon on the right; clicking the icon does not move the focus.
* Installed OrbitFox and your script; no change.

Unfortunately I don’t know how to access console.log.

You can see my live site at https://www.binnenstadduurzaam.nl/ (it’s in Dutch, but the Search icon is at top right). Searching on derek should give two hits.

And my test site is at https://prive.corryderek.nl/wp-test/

Feel free to ignore what follows, I don’t want to obligate you in any way!

On the test site I have created a user vytis, the password being the 10 letters of your website. In a week or two I shall delete the site and/or rebuild it, so if you want you can experiment on it. Mail to the webmaster (page Contact of the live site) comes into my inbox if you want to communicate that way.

• This reply was modified 4 years ago by NL_Derek.

Hi @nl_derek,

Thanks for your detailed explanation. I see that jQuery doesn’t work on your website (not defined), have you dequeued jQuery on purpose?

You can include online CDN in the same Header section in Customizer that was added by OrbitFox plugin:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

And then that jQuery function provided before should work as expected.

I hope it helps! ??

Hi Vytis, again thanks for your help. But you are going rather over my head! I don’t really know what jQuery is, and I haven’t dequeued it. I looked on my webhostingserver site but could find nothing which looked like jQuery. I shall ask my service provider how I can enable it.

Anyway I added your new script to the OrbitFox Header Scripts section, followed by your script from 2 weeks ago, but it doesn’t seem to have helped.

I shall post again when my service provider replies.

I thought I had created a user vytis on my test site but apparently I hadn’t. I have now, password is the 10 letters of your website.

I contacted my ISP but they couldn’t help. So I tried to learn a bit about jQuery; I’m still at a very basic level but I think I can understand Vytis’ script and I can’t see what is wrong with it. I have added jQuery to the tags in the hope of attracting other jQuery debugging experts.

The status now: I load jQuery (as per Vytis’ post of 23nov) and run a script (Vytis’ post of 16nov) but the search box doesn’t get focus. The test site is https://prive.corryderek.nl/wp-test/

• This reply was modified 4 years ago by NL_Derek. Reason: clarified tags

Hi @nl_derek,

I’m still not able to access the admin dashboard for some reason, sorry about that.

I noticed that script is now added correctly but it doesn’t work even though same script works after I add it via browser console.

Please try to leave
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

In the Header scripts section and add:

<script>
jQuery('.nv-icon.nv-search').click(function() { 
setTimeout(function() { 
jQuery('.search-field')[0].focus(); 
}, 100); 
});
</script>

To the footer scripts section to verify if that changes the behavior.

Hallo Vytis, I added the script and it works on Windows, but not on Android. It’s late so I’ll investigate further tomorrow. But thanks, we’re on the track! Update: it works on my 10″ tablet in landscape but not portrait, and not at all on my 4″ phone; it seems not to work when the menu is a hamburger symbol.

• This reply was modified 3 years, 12 months ago by NL_Derek. Reason: Update about Android

It appears that the latest update (2.9.3) to Neve has fixed the problem. Thanks anyway.