Biblioteca de formato de texto de entrada de formulario flexible-Cleave. js

Tiempo de ejecución: 30 minutos. Empezar

Autor: nosir
Views Total: 3,141
Sitio oficial: Ir a la web
Actualizado: March 20, 2019
Licencia: MIT

Vista prévia

Biblioteca de formato de texto de entrada de formulario flexible-Cleave. js

Descripción

Cleave. js es una sencilla biblioteca de JavaScript ligera que se utiliza para restringir y formatear el texto de entrada a un patrón específico (tarjetas de crédito, números de teléfono, fechas, etc.).

AMD y commonJS son compatibles. También proporciona como un componente de reAct.

¿Cómo funciona?

Primero debe incluir la biblioteca Cleave. js en la Página Web.

<script src="cleave.min.js"></script>

Incluya un addon de su elección como este:

<script src="addons/cleave-phone.{country}.js"></script>

Cree un nuevo objeto de Cleave, especifique el campo de entrada de destino y pase las opciones de la siguiente manera:

new Cleave('.input', {


// options here
});

Todas las opciones posibles.

// credit card
creditCard: true,
creditCardStrictMode: true,
onCreditCardTypeChanged: function () {},

// phone
phone: true,
phoneRegionCode: 'AU',

// date
date: true,
datePattern: ['d', 'm', 'Y'],

// time
time: true,
timePattern: ['h', 'm', 's'],

// numeral
numeral: true,
numeralDecimalScale: 2,
numeralDecimalMark: '.',
numeralThousandsGroupStyle: 'thousand',
numeralIntegerScale: 4,
numeralPositiveOnly: false,
stripLeadingZeroes: true,

// others
numericOnly: true,
uppercase: true,
lowercase: true,
prefix : '',
delimiter : '',
blocks: [],
delimiters: [],
delimiterlazyshow: true,
noImmediatePrefix: false,
rawValueTrimPrefix: false,
onValueChanged: function(){}

API methods.

// Gets raw value without any format pattern or delimiter
instance.getRawValue()

// Sets raw value, it will then apply formatting automatically
instance.setRawValue(value)

// Gets formatted pretty value
instance.getFormattedValue()

// Gets ISO format date value, this only works for date input type.
instance.getISOFormatDate()

// Destroy
instance.destroy()

// Sets / Changes country region code.
instance.setPhoneRegionCode(regionCode)

Registro de cambios

v1.4.10 (03/20/2019)

  • Agregar documento y lanzar ADVERTENCIA cuando varios elementos coinciden con el selector

Te puede interesar: