1

I'm essentially trying to emulate the Apple ID account creation birthday input (can be found here: https://appleid.apple.com/account or if you google Apple ID and click "Create Your Apple ID" on top).

Part of the functionality of the input is that when you click into it, if there's no current value it will default to mm/dd/yyyy and force the user's input caret to the front of the input, replacing characters from the front as the user types. Any later clicks in the input will force the user's cursor to after the spot in the value they've typed. E.g. 05/4m/yyyy the cursor must be after the 4.

I've done a lot of searching and not came across any reliable ways to do this in React. Attempts to use setSelectionRange haven't worked. Thank you!

Jackson
  • 105
  • 1
  • 7
  • I'm pretty sure that's a placeholder... Or just an element behind the input? – kelsny May 04 '22 at 16:42
  • Have you tried [this](https://stackoverflow.com/questions/10778291/move-the-cursor-position-with-javascript) or [this](https://stackoverflow.com/questions/1181700/set-cursor-position-on-contenteditable-div)? – Anurag Srivastava May 04 '22 at 16:47
  • 1
    It's masking, it's very common - something like this has the functionality you're looking for: https://robinherbots.github.io/Inputmask/ – StudioTime May 04 '22 at 16:53

0 Answers0