{"id":3177,"date":"2017-01-14T08:54:00","date_gmt":"2017-01-14T08:54:00","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=3177"},"modified":"2023-10-02T09:25:29","modified_gmt":"2023-10-02T09:25:29","slug":"4-demos-of-input-masking-solution-by-using-javascript","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/","title":{"rendered":"4 demos of input masking solution by using JavaScript"},"content":{"rendered":"

What is input masking library?<\/strong><\/h3>\n

In certain scenarios, you may require enabling\u00a0the visitors for entering only the specific data in certain format. For example, zip code or credit card entries are in specific pattern where you may restrict certain data format.<\/p>\n

The input-masking<\/strong><\/em> library enables you making an input field masked with a specific data entry format.<\/p>\n

This JavaScript library for masking input fields will also make entries of spaces, dashes etc automatically. So, the users may just focus on entering the numbers or alphabets. \u00a0This may be particularly useful where a large number of entries are required by data entry operators using web interface.<\/p>\n

Have a look at the demos in the following section along with learning to set up this library in your web pages.<\/p>\n

A demo of input masking for credit card numbers<\/strong><\/h3>\n

In this demo, a general format for the credit card is given. Try entering numbers and alphabets without entering the spaces. You will see, the spaces are added automatically:<\/p>\n

\"input<\/p>\n

See online demo and code<\/strong><\/h6>\n

The simple markup:<\/strong><\/p>\n

<ul>\r\n\r\n<li>\r\n\r\n\u00a0 <label for=\"cc\">Credit Card Number<\/label>\r\n\r\n\u00a0 <input id=\"cc\" type=\"tel\" name=\"ccnumber\" class=\"masked\" title=\"Enter the 16 number credit card\">\r\n\r\n<\/li>\r\n\r\n<\/ul><\/pre>\n
Include the reference of input-mask library:<\/strong><\/p>\n
<script src=”js\/masking-input\/masking-input.js” data-autoinit=”true”><\/script><\/p><\/blockquote>\n
A little CSS is also used that you can see in the demo page.<\/p>\n
A demo of Canadian Zip code<\/strong><\/h3>\n
The Canadian zip code is the mix of alpha-numeric, so this is an interesting case for input masking. The placeholder for entering the Canadian zip code is made in a way that a user knows if a character is required or number. See the demonstration online:<\/p>\n
\"input<\/p>\n
See online demo and code<\/strong><\/h6>\n
You saw, rather than using the X in placeholder, I used A1B 2C3, so the\u00a0user knows the required format. The user does not need to enter the space, just keep entering the code in correct format.<\/p>\n
The markup for creating the Canadian zip code input masked field:<\/strong><\/p>\n
<ul>\r\n\r\n<li>\r\n\r\n\u00a0 <label for=\"zipca\">Enter Canadian Zip Code<\/label>\r\n\r\n\u00a0 <input id=\"zipca\" type=\"text\" name=\"zipcodeca\"  class=\"masked\" data-charset=\"_X_ X_X\" title=\"Enter Canadian zip code\">\r\n\r\n<\/li>\r\n\r\n<\/ul><\/pre>\n
Again, you just need to include the JS library at the end of the\u00a0script (before the <\/body> closing tag).<\/p>\n
A demo of telephone number with parenthesis<\/strong><\/h3>\n
In this example, the telephone field is masked where the parenthesis will be managed by the script itself.<\/p>\n
\"input<\/p>\n
See online demo and code<\/strong><\/h6>\n
The markup:<\/strong><\/p>\n
<li>\r\n\r\n\u00a0 <label for=\"tel\">Enter Phone<\/label>\r\n\r\n\u00a0 <input id=\"tel\" type=\"tel\" name=\"phone\" class=\"masked\" title=\"Enter number without parenthesis\">\r\n\r\n<\/li><\/pre>\n
How to customize the input masking for other fields?<\/strong><\/h3>\n
The important thing to be noticed in all above examples is defining the pattern. For example, in the above telephone example, the following pattern is set in the input field:<\/p>\n
pattern=”\\(\\d{3}\\) \\d{3}\\-\\d{4}<\/p><\/blockquote>\n
Now, if you want to allow the users entering four digits in parenthesis rather 3, then just make it 4. \u00a0For showing how to customize the input fields, I also added another dash, so this is how the pattern looks:<\/p>\n
pattern=”\\(\\d{4}\\) \\d{3}\\–\\d{4}<\/p><\/blockquote>\n
You also need to make changes in the placeholder as follows:<\/p>\n
placeholder=”(XXXX) XXX–XXXX”<\/p><\/blockquote>\n
Run the demo online by clicking the image or link below and enter the numbers and see how it is customized:<\/p>\n
\"input<\/p>\n
See online demo and code<\/strong><\/h6>\n
The markup:<\/strong><\/p>\n
<li>\r\n\r\n\u00a0 <label for=\"tel\">Enter Phone<\/label>\r\n\r\n\u00a0 <input id=\"tel\" type=\"tel\" name=\"phone\"  class=\"masked\" title=\"Enter number without parenthesis\">\r\n\r\n<\/li><\/pre>\n
Similarly, you may make the changes for adding the numbers or characters in the required format.<\/p>\n
For full documentation and downloading this library, follow this link<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
What is input masking library? In certain scenarios, you may require enabling\u00a0the visitors for entering only the specific data in certain format. For example, zip code or credit card entries are in specific pattern where you may restrict certain data format. The input-masking library enables you making an input field masked with a specific data … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3179,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[30],"yoast_head":"\n4 demos of input masking solution by using JavaScript<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"4 demos of input masking solution by using JavaScript\" \/>\n<meta property=\"og:description\" content=\"What is input masking library? In certain scenarios, you may require enabling\u00a0the visitors for entering only the specific data in certain format. For example, zip code or credit card entries are in specific pattern where you may restrict certain data format. The input-masking library enables you making an input field masked with a specific data ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-14T08:54:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-02T09:25:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/01\/112.0_2-input-masking-Canadian-zip.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"448\" \/>\n\t<meta property=\"og:image:height\" content=\"67\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/\",\"url\":\"https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/\",\"name\":\"4 demos of input masking solution by using JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2017-01-14T08:54:00+00:00\",\"dateModified\":\"2023-10-02T09:25:29+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"4 demos of input masking solution by using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"4 demos of input masking solution by using JavaScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/","og_locale":"en_US","og_type":"article","og_title":"4 demos of input masking solution by using JavaScript","og_description":"What is input masking library? In certain scenarios, you may require enabling\u00a0the visitors for entering only the specific data in certain format. For example, zip code or credit card entries are in specific pattern where you may restrict certain data format. The input-masking library enables you making an input field masked with a specific data ... Read more","og_url":"https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/","article_published_time":"2017-01-14T08:54:00+00:00","article_modified_time":"2023-10-02T09:25:29+00:00","og_image":[{"width":448,"height":67,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2017\/01\/112.0_2-input-masking-Canadian-zip.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/","url":"https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/","name":"4 demos of input masking solution by using JavaScript","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2017-01-14T08:54:00+00:00","dateModified":"2023-10-02T09:25:29+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/4-demos-of-input-masking-solution-by-using-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"4 demos of input masking solution by using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3177"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=3177"}],"version-history":[{"count":4,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3177\/revisions"}],"predecessor-version":[{"id":10432,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/3177\/revisions\/10432"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/3179"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=3177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=3177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=3177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}