Tuesday, September 27, 2011

Masking numeric values with JQuery

The JQuery plugin Masked Input is great if you want to auto-format a numeric field. for example, you can add '/' in a date field, '-' in a phone field, etc. Then the user just types in the numbers, and the field is automatically formatted.

HTML setup

<script language="javascript" type='text/javascript' src='scripts/jquery-1.6.1.min.js'></script>
<script language="javascript" type='text/javascript' src='scripts/jquery.maskedinput-1.3.min.js'></script>
<script language="javascript" type="text/javascript">
jQuery(function($){
$("#birthDate").mask("99/99/9999");
$("#phone").mask("(999) 999-9999");
$("#zip").mask("99999");
});
</script>
</head>

No comments:

Post a Comment