How can I create a input text in React with placeholder as DD-MM-YYYY, when I start typing the value, the placeholder should be removed partially. For eg if I type 02-MM-YYYY(in this case -MM-YYYY should be visible part of the placeholder)

CodePudding user response：

The pattern you are describing is an input mask, so you might have more luck searching for this than placeholder.

First of all, have you considered using <input type="date">? Most browsers also provide an input mask for this kind of input.

If this doesn’t help you, HTML does not provide input mask functionality natively, so you will need to find a library that does that for you.

As always, you should clarify your basic requirements before choosing a library from npm. Most notably, it should be accessible for users with disabilities. Input masks seemingly improve user experience, but they are hard to get right. If not done well, they actually render the user’s experience worse.

Things the input should still support with input mask applied:

• (Copying and) Pasting the value from elsewhere
• Autofill by the browser (for your birthdate, for example)
• Screen readers announce the value correctly
• Correcting the value by means of keyboard only, for example deleting one number in the middle
• The pattern adjusts with the locale (language)