Cursor position when input mask is set [RESOLVED]

[user61c1989d434cc360 (holdusback)]

hey everyone, on chrome there is a quite misleading bug.

If I have a mask input set (custom phone number), I will see the underline with the number of accepted characters, but if I dont click at the beginning of the field I will go at the last char, and so I cant type anything. I have to click at the beginning of the field which is not really good for the user, it should get the cursor to the very first character to type the phone number, wherever I click on the field.

Look like im not alone with this :

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 alwa…

Is there a way to fix this ? I think I will have to use some custom JS to force the cursor going the first character…

Thanks in advance !

[chrishajer (Chris (Gravity Forms))]

Please have a look at this solution from @uamv:

Position caret in Phone Field [RESOLVED]

I have encountered this with input masks before. The following script can be used to force cursor placement to the start of the input when focused: // force cursor placement on input mask var maskedPhones = document.querySelectorAll('.gfield .ginput_container_phone input'); for (i = 0; i < maskedPhones.length; ++i) { maskedPhones[i].addEventListener('mouseup', function(e) { if ( e.currentTarget.value.replace(/\(|\)|_|-|\./g,'').trim() == '' ) { e.currentTarget.setSelectionRange(0,0); } …

[user61c1989d434cc360 (holdusback)]

Hey Chris thanks for your quick answer !

I think this is specific for phone number… In France we don’t use this format of phone, so it doesn’t really help me.

And in fact I want to fix this issue on all field that have mask, not only phone number because I have like 10 fields that have mask.

EDIT :

Tried this code (look like same code as your link) :

Moving cursor to correct point with a mask

Hi there, I have created a form for a client and there is a custom mask on the phone input, I would like for it to always focus at the start of where they can type from and not where it is clicked. Anyone able to help, here is a link to demonstrate what I mean: https://www.zerodebt.co.za/testing-page/ Thanks.

It work on the first page of my multipage form… I also wait that the page is loaded to strike the JS code but for now It dont work on field that are on other page.

[user61c1989d434cc360 (holdusback)]

Creating a new message cause I’ve fixed my issue.

With jquery :

jQuery(document).ready(function () 
{
	//https://community.gravityforms.com/t/cursor-position-when-input-mask-is-set/11708/3
	jQuery( document ).on('mouseup','.force_cursor_placement', function (e) 
	{
		if (e.target.value.replace(/\(|\)|_|-|\./g,'').trim() == '')
	    {
			e.target.setSelectionRange(0,0);
	    }
		
	});

});

Only bad things is that if the user partially complete the field, click on another field or anywhere else, it deletes the field value. (Maybe you can help me to fix this ?)

[chrishajer (Chris (Gravity Forms))]

I don’t have a solution for that, but I will open an issue with the product team to see if this can be addressed in an upcoming release. Thank you.

[user61c1989d434cc360 (holdusback)]

Thanks for that. do not hesitate to answer here if you have an answer from devs