Today, we will show you how to add the jqxMaskedInput widget to your web pages. jqxMaskedInput represents a jQuery input widget which uses a mask to distinguish between proper and improper user input. You can define phone number, ssn, zip code, dates, etc. masks by setting the jqxMaskedInput mask property.
The first step is to include the required javascript and css files. jqxMaskedInput is implemented in the jqxmaskedinput.js. We also need to add references to the jQuery framework(jquery-1.7.1.min.js) and jQWidgets framework(jqxcore.js).
<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /><script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script><script type="text/javascript" src="jqwidgets/jqxcore.js"></script><script type="text/javascript" src="jqwidgets/jqxmaskedinput.js"></script>
Next, we need to add a DIV tag to the document’s body to use it as a jqxMaskedInput. The DIV tag will be initialized as a jqxMaskedInput widget using JavaScript.
<div id='numericInput'>
Select the DIV tag and call the jqxMaskedInput constructor.
$("#numericInput").jqxMaskedInput({ width: 250, height: 25, mask: '#####-####'});
The ‘mask’ property specifies the mask that restricts the user’s input. For example, if you want to define a phone number mask, you can use the following code:
$("#numericInput").jqxMaskedInput({ width: 250, height: 25, mask: '(###)###-####'}); 