Cursor in search textfield after page load

SOLVE
Highlighted
Occasional Contributor

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

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Advisor

Ahh my appologies!

 

Follow the steps below:

  1. Go to the design manager.
  2. Navigate to the page template.
  3. Scroll to the bottom of the right panel, to the section labeled "Additional markup before </body>".
    Screeenshot - 2019-10-08 at 2.50.49 PM.png
  4. 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.

Reply
0 Upvotes
8 Replies 8
Advisor

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(); 

 

Reply
0 Upvotes
Occasional Contributor

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

Reply
0 Upvotes
Advisor

Ahh my appologies!

 

Follow the steps below:

  1. Go to the design manager.
  2. Navigate to the page template.
  3. Scroll to the bottom of the right panel, to the section labeled "Additional markup before </body>".
    Screeenshot - 2019-10-08 at 2.50.49 PM.png
  4. 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.

Reply
0 Upvotes
Occasional Contributor

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

Advisor

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

 

  1.  In the template.
  2. Find the additional <head> markup.
  3. 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);
        }
Reply
0 Upvotes
Occasional Contributor

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

 

screenshot.png

Reply
0 Upvotes
Advisor

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>

 

Reply
0 Upvotes
Occasional Contributor

:-D

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. :-)

Reply
0 Upvotes