Cursor in search textfield after page load

SeanWiklund · ‎out 8, 2019

Dearest smart awesome fellow humans,

On our search page (link below), I'd like a cursor to automatically appear in the search field when or during the page has loaded. The less clicks for the visitor, the better:

https://www.origum.se/search

I have found the page below with some tips and tricks, but - an issue with the HubSpot site search page/module (according to HubSpot themselves), is that there are no ID:s used in the site search form/field.

https://www.webmechanix.com/automatically-put-cursor-in-form-field-make-users-happy#tutorial

Does anyone have a neat solution for this and if so - how/where to implement it?

PS. It doesn't have to be javascript. I just want the cursor in the text field...

All the best,
Sean

Kevin-C · ‎out 8, 2019

Ahh my appologies!

Follow the steps below:

Go to the design manager.
Navigate to the page template.
Scroll to the bottom of the right panel, to the section labeled "Additional markup before </body>".

Paste the code below.

<script>
  $( document ).ready(function() {
    $("input:text:visible:first").focus();
  });
</script>

What this is doing is inserting a script tag with jQuery code that saya: When the document is ready to be modified, find the first visible input with type equal to text and make this the browsers focus.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev

Exibir solução no post original

Kevin-C · ‎out 8, 2019

Hey @SeanWiklund

You could use Jquery to target the first input with pseudo selector, like so:

$("input:text:visible:first").focus();

or the input index like so:

$('input[@type="text"]')[0].focus();

SeanWiklund · ‎out 8, 2019

Hi @Kevin-C!

Awesome! Now. Imagine I'm lacking programming skills. Which I am. So, where, would you say I should insert the first or the second examples? Exactly?

I know where to find the search module and clone it in the Design Manager - but right now, you need to guide me more specifically. 🙂

Also, thanks for replying. I appreciate it a lot!

All the best,
Sean

Kevin-C · ‎out 8, 2019

Ahh my appologies!

Follow the steps below:

Go to the design manager.
Navigate to the page template.
Scroll to the bottom of the right panel, to the section labeled "Additional markup before </body>".

Paste the code below.

<script>
  $( document ).ready(function() {
    $("input:text:visible:first").focus();
  });
</script>

What this is doing is inserting a script tag with jQuery code that saya: When the document is ready to be modified, find the first visible input with type equal to text and make this the browsers focus.

Kevin-C · ‎out 8, 2019

Off topic but a fun value add to increase the UX.

In the template.
Find the additional <head> markup.

And paste the following markup:

input {
        border: none;
        -moz-box-shadow: 0 0 0px 0px rgba(255,255,255,1);
        -webkit-box-shadow: 0 0 0px 0px rgba(255,255,255,1);
        box-shadow: 0 0 0px 0px rgba(255,255,255,1);
        font-size: 2em;
        
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    input:focus {
        -moz-box-shadow: 0 0 0 4px rgba(166,201,57,1);
        -webkit-box-shadow: 0 0 0 4px rgba(166,201,57,1);
        box-shadow: 0 0 0 4px rgba(166,201,57,1);
    }

SeanWiklund · ‎out 8, 2019

It gives me the following error, when trying to copy/paste:

Kevin-C · ‎out 8, 2019

Lol causing more problems than finding solutions.

I forgot to wrap the css in a style tag. See below:

<style>
input {
        -moz-box-shadow: 0 0 0px 0px rgba(255,255,255,1);
        -webkit-box-shadow: 0 0 0px 0px rgba(255,255,255,1);
        box-shadow: 0 0 0px 0px rgba(255,255,255,1);
        font-size: 2em;
        
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    input:focus {
        -moz-box-shadow: 0 0 0 4px rgba(166,201,57,1);
        -webkit-box-shadow: 0 0 0 4px rgba(166,201,57,1);
        box-shadow: 0 0 0 4px rgba(166,201,57,1);
    }
</style>

SeanWiklund · ‎out 8, 2019

😄

Now it's working. I'll just have to change some of the descriptive text. It's absurdly large right now.

Thanks for the extra tweak. 🙂

SeanWiklund · ‎out 8, 2019

Kevin, my man... No need to appologize. You can't possibly know where I am on the 1337 programming scale...

Your last answer was written like a bauss and I now have a blinking cursor. You're the hero of the day. Thank you so much!

Now, continue your day, knowing that you have a very thankful stranger in Sweden. *virtual fist bump*

Stay awesome,

Sean

CMS Development