0

I'm grappling with the scenario of how I can add the HTML 5 element "autofocus" to a searchbox on the /searchresults.aspx of my SPO enterprise search center. Basically, I would like the mouse cursor to be in the search box already when the page has finished loading so that users can type right away.

Now, I'm not a developer and inspecting the corresponding .aspx page presents me with code that I'm mostly unable to interpret. I was hoping to find HTML attributes and elements in that .aspx page but unfortunately it only contains html and head tags as well as lots of xmlns:mso definitions - no idea what that is.

However, when I inspect the loaded page in the chrome developer tools, a bunge of html, css and js code is added. Where does that come from and how/where should I add the HTML "autofocus" attribute?

Thanks so much for your help.

5

The search box is a server-rendered control, so you can't just redefine the HTML inside it.

But, you can use jQuery to just apply the focus after page load. Drop a Script Editor web part onto the page and do something like this:

$(document).ready(function(){
   $("#SearchBox input").focus();
});

You might need to tweak the selector, but that one worked in my environment. Also don't forget to make sure you have a reference to jQuery on the page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.