Categorías destacadas
Artículo
|
Formateado de inputs con Masked Input Plugin |
Masked Input es un plugin desarrollado para jQuery que te permite formatear campos de entrada para así poder controlar la entrada de datos en nuestros campos del formulario.
Mediante este plugin, podremos controlar los datos que se ponen en los campos, así poder indicar que la fecha que aparezca en un campo solo pueda tener formato “__/__/____”, el cual se irá cumplimentando con los datos correctos, y si se intenta poner un dato no permitido, este no os dejará ponerlo.
Para establecer los patrones, el plugin permite la opción de utilizar ciertos comodines. Veamos estos comodines.
Lo primero que hay que hacer, es descargarse la librería para su utilización. Lo podéis hacer desde el siguiente enlace.
Una vez descargado, debemos de añadir las librerías en nuestra aplicación. Recordemos que hace falta jQuery para que funcione el plugin.
Lo último que habría que hacer sería hacer la llamada a la función que hace el control de los datos introducidos. Para ello debemos de indicarle la cadena que queremos que cumpla.
Como vemos, debemos de hacer la llamada pasándole el id correspondiente a cada campo del formulario que queremos controlar.
Por defecto, en los campos que se utiliza este control de datos, aparece el formato correcto pero con “_”. Si esto no nos gusta, podemos sustituirlo por lo que nosotros queramos, o indicar que no muestre nada. Esto lo podríamos hacer de la siguiente forma.
Podéis ver un ejemplo de funcionamiento en su página oficial.
Mediante este plugin, podremos controlar los datos que se ponen en los campos, así poder indicar que la fecha que aparezca en un campo solo pueda tener formato “__/__/____”, el cual se irá cumplimentando con los datos correctos, y si se intenta poner un dato no permitido, este no os dejará ponerlo.
Para establecer los patrones, el plugin permite la opción de utilizar ciertos comodines. Veamos estos comodines.
- A : Representa un carácter alfabético.
- 9 : Representa un carácter numérico.
- * : Representa tanto un carácter número o alfabético.
Lo primero que hay que hacer, es descargarse la librería para su utilización. Lo podéis hacer desde el siguiente enlace.
Una vez descargado, debemos de añadir las librerías en nuestra aplicación. Recordemos que hace falta jQuery para que funcione el plugin.
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.maskedinput.js" type="text/javascript"></script>
Lo último que habría que hacer sería hacer la llamada a la función que hace el control de los datos introducidos. Para ello debemos de indicarle la cadena que queremos que cumpla.
jQuery(function($){
$("#date").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
$("#tin").mask("99-9999999");
$("#ssn").mask("999-99-9999");
});
Como vemos, debemos de hacer la llamada pasándole el id correspondiente a cada campo del formulario que queremos controlar.
Por defecto, en los campos que se utiliza este control de datos, aparece el formato correcto pero con “_”. Si esto no nos gusta, podemos sustituirlo por lo que nosotros queramos, o indicar que no muestre nada. Esto lo podríamos hacer de la siguiente forma.
jQuery(function($){
$("#product").mask("99/99/9999",{placeholder:" "});
});
Podéis ver un ejemplo de funcionamiento en su página oficial.
 |
Publicado por: angel carrero |
|
|
Comentarios
Últimas noticias
· factura
Últimos artículos
