Complemento de máscara de entrada rica en características con vanilla JavaScript-imaskjs

Tiempo de ejecución: 30 minutos. Empezar

Autor: uNmAnNeR
Views Total: 1,504
Sitio oficial: Ir a la web
Actualizado: March 30, 2019
Licencia: MIT

Vista prévia

Complemento de máscara de entrada rica en características con vanilla JavaScript-imaskjs

Descripción

imaskjs es un plugin de máscara de entrada de JavaScript Vanilla que permite al usuario introducir los datos en un formato determinado.

También funciona con angular, reAct, reaccionar Native y Vue. js.

Características

  • 2 tipos de máscara incorporados: fecha y número
  • Permite crear reglas de máscara mediante regex o function.

Funcionamiento

Inserte la biblioteca imaskjs en la página.

<script defer src="https://unpkg.com/imask"></script>

Aplique una máscara personalizada al campo de entrada mediante Regex.

<input id="example" type="text" value="">
var regExpMask = new IMask(document.getElementById('example'),{


mask: /^[1-6]\d{0,5}$/
});

Aplique la máscara numérica a su campo numérico.

<input id="example" type="text" value="">
var numberMask = new IMask(document.getElementById('example'), {


mask: Number,


min: -1000,


max: 1000,


thousandsSeparator: ' '
})

Aplique la máscara de fecha a su campo de fecha.

<input id="example" type="text" value="">
var dateMask = new IMask(document.getElementById('date-mask'),{


mask: Date,


min: new Date(2000, 0, 1),


max: new Date(2020, 0, 1),


lazy: false
})

También puede aplicar varias máscaras al mismo campo.

<input id="example" type="text" value="">
var dynamicMask = new IMask(document.getElementById('dynamic-mask'),{


mask: [{



mask: '+{1}(000)000-00-00'


},


{



mask: /^\S*@?\S*$/


}]
})

Available event handlers.

var myMask = new IMask()
.on('complete', function() {

// do something
})
.on('accept', function() {

// do something
})

Registro de cambios

03/30/2019

  • Permitir cadena vacía para cualquier número

01/26/2019

  • v4.1.5

01/05/2019

  • v4.1.4

10/12/2018

  • escape Radix Char

09/13/2018

  • v4.0

08/04/2018

  • Bugfix

Te puede interesar: