Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

255
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda