Scroll to Area, Insert Cursor in <input> box

[toad78]

Using this code on this page (just click the ‘Get started now’ button) to see the effect,

jQuery( "#getstarted" ).click(function() {
		jQuery( "#happitext" ).focus();
	});

I’m trying to get the user’s cursor to automatically insert into the ‘Company name’ textbox without them having to do it. The result I’m seeing is that the cursor isn’t in there. Any idea?

[m3g4p0p]

That CTA doesn’t have an id="getstarted" – #getstarted refers to a different element (a section). You can target the link like this

jQuery('[href="#getstarted"]')

instead, or give it it’s own ID or a unique class.

[toad78]

@m3g4p0p

jQuery(‘[href=“#getstarted”]’)

Thanks, m3g4p0p. I did modify your code as follows:

jQuery('[href="#getstarted"]').click(function() {
		jQuery( "#happitext" ).focus();
	});

but the behavior I’m seeing is that while the screen is scrolling, I see the blinking cursor in the <input id="#happitext"> textbox until the scrolling stops. When the scrolling stops, the cursor is no longer there.

[m3g4p0p]

After the scrolling has completed, you’re explicitly .focus()ing the scroll target, thus taking away the focus from the input element. It’s this line:

jQuerytarget.focus();

I suppose the purpose is that it allows you to immediately navigate to the next focusable element with the tab-key then – which is certainly a nice touch! If you don’t want that for specific elements, you might set a data-* attribute on the link (say data-prevent-focus), and check for that attribute at the top of the animation-complete callback. Along the lines of

// If the attribute is present, return from the function
if (event.target.dataset.preventFocus !== undefined) {
  return
}

// Otherwise proceed as usual
// ...