Formatear campos de entrada automáticamente con Cleave.js

Piensa en todos los diferentes campos de entrada que requiere una estructura formateada. Números de teléfono, tarjetas de crédito, fechas de nacimiento, domicilios… todos tienen su propios patrones únicos.

Es bastante fácil dejar estos campos solos y confiar en el usuario. Pero podría ser mejor usar Cleave.js, una complemento de JavaScript de vainilla gratis para ayudarte Formatear automáticamente los campos de entrada.

HTML5 viene con su Conjunto propio de entradas relacionadas con patrones de datos. tales como números de teléfono. Con Cleave, puedes llevar esto al siguiente nivel con entradas personalizadas ese formatear texto automáticamente como está escrito.

Por defecto, el plugin soporta cinco patrones de texto basicos:

1. Números de tarjetas de crédito
2. Números de teléfono
3. fechas
4. Estilo numérico (con comas).
5. Campos de entrada personalizados

Esa última opción es la mejor porque puedes hacer tu propios patrones de datos personalizados desde cero. Cleave no te obliga a seguir ninguna metodología estricta.

En cambio, te da las herramientas para construye tus propios aportes con Soporte opcional para React y componentes angulares.. También apoya todos los principales navegadores y debe coincidir con el apoyo para navegadores heredados junto con jQuery.

Tenga en cuenta que este no es un complemento difícil de configurar. Tú Apunta a cualquier ID o clase que tengas en su campo de entrada y pasar eso a una nueva instancia de Cleave. Aquí hay un fragmento de muestra:

 var cleave = new Cleave ('. input-phone', phone: true, phoneRegionCode: 'country'); 

Sin embargo, si bien Cleave puede ser fácil de configurar, tiene muchas características personalizadas puedes jugar con.

Toda la documentación es alojado dentro del repositorio, así que tendrás que navegar por la página de GitHub para Encuentra todos los diferentes métodos y opciones.. Específicamente, la página de opciones Tiene mucho que hacer y puede tomar un tiempo encontrar lo que quiere.

Afortunadamente, Cleave tiene muchos ejemplos en vivo Puedes estudiar y replicar. Estos ejemplos son también descarga gratuita desde el repositorio de GitHub. Si quieres ver más ejemplos en vivo visita el Página de inicio de Cleave.js o echa un vistazo este violín repleto de demostraciones.