Position caret in Phone Field [RESOLVED]

Get Help
, ,
1

When clicking into a phone field, the caret lands where the user clicked into the field. Is there a way to force the caret to the 1st position?

2

By default, when they click into the phone field using the US format with the input mask, the cursor should be positioned at the start of that input. Here’s how it worked on a form I have:

OhdTGCFFfG

If it’s not working like that for you, please share the URL so we can take a look. Thank you.

3

The form is at the bottom of the page. You can see that when you click on the uppercase N in Phone Number, the cursor is not positioned correctly.

Actually, the cursor just jumps to the end if I click anywhere to the right of the place holder text.

9 Pick Up (561dev.com)

4

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

This code is specific to masked phone inputs. It could be modified to target other input masks, as needed.

1 Like
5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.