Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

254
Views
Keep placeholder partially while typing in input type text

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)

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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)
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!