Cursor position on field focus [RESOLVED]

When I click into a field with a standard or custom mask applied, the cursor jumps to the position I’ve clicked. Or to the end if I’ve clicked outside the mask length. For example a single line text field with SSN mask or a phone field.

This is actually quite troublesome for my users who expect the cursor position to be at the start of the field and have to spend time moving back to the start.

It seems trivial but in my user testing all users have complained about this.

Is there a way to always place the cursor at the start of a field when it’s selected?

Try smth like this:

$(document).bind('gform_post_render', function(){

	// Move cursor to the beginning of the phone input
	$('.gfield .ginput_container_phone input').on('focus.mask', function(){

		var el = $(this);

		// add a little delay which allows
		// to fire our code after GF core
		setTimeout(function(){

			switch (el.val()) {
				case '(___) ___-____': el.get(0).setSelectionRange(1,1); break;
				case '+1 (___) ___-____': el.get(0).setSelectionRange(4,4); break;
			}

		}, 75);

	});

});

Thanks for the suggestion @mgwebpartners.

This behavior actually appears to be default.
The issue in my case was being caused by Chrome autofill. Disabling it has the fields acting as expected again.

1 Like