Can I add an HTML 5 element to an .aspx page?

Question

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.

Answer 1

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.