{"id":29389,"date":"2017-03-06T20:01:59","date_gmt":"2017-03-06T12:01:59","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=29389"},"modified":"2017-12-09T19:56:53","modified_gmt":"2017-12-09T11:56:53","slug":"cleave-js","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/cleave-js\/","title":{"rendered":"Format Input Fields Automatically with Cleave.js"},"content":{"rendered":"

Think about all the different input fields that require a formatted structure<\/strong>. Phone numbers, credit cards, birth dates, street addresses\u2026 they all have their own unique patterns<\/strong>.<\/p>\n

It\u2019s easy enough to leave these fields alone and trust the user. But it might be better to use Cleave.js<\/a><\/strong>, a free vanilla JavaScript plugin<\/strong> to help you automatically format input fields<\/strong>.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\t4 Form Design UX Tips You Should Know (With Examples)<\/a>\n\t\t\t\t<\/p>\n

\"cleave.js<\/a><\/figure>\n

HTML5 comes with its own set of inputs related to data patterns<\/strong> such as telephone numbers. With Cleave, you can take this to the next level with customized inputs<\/strong> that automatically format text<\/strong> as it\u2019s typed.<\/p>\n

By default, the plugin supports five basic text patterns<\/strong>:<\/p>\n

    \n
  1. Credit card numbers<\/li>\n
  2. Phone numbers<\/li>\n
  3. Dates<\/li>\n
  4. Numeric styling (with commas)<\/li>\n
  5. Custom input fields<\/li>\n<\/ol>\n

    That last choice is the coolest one because you can make your own custom data patterns from scratch<\/strong>. Cleave doesn\u2019t force you to follow any strict methodology.<\/p>\n

    Instead, it gives you the tools to build your own inputs<\/strong> with optional support for React and Angular components<\/strong>. It also supports all major browsers<\/strong> and should match support for legacy browsers<\/strong> along with jQuery<\/strong>.<\/p>\n

    \"cleavejs<\/a><\/figure>\n

    Note this isn\u2019t a tough plugin to set up. You target whatever ID or class you have<\/strong> on your input field and pass that into a new Cleave instance<\/strong>. Here\u2019s a sample snippet:<\/p>\n

    \r\nvar cleave = new Cleave('.input-phone', {\r\n    phone: true,\r\n    phoneRegionCode: '{country}'\r\n});\r\n<\/pre>\n
    However, while Cleave may be easy to set up, it has a lot of custom features<\/strong> you can toy with.<\/p>\n
    All of the documentation is hosted inside the repo<\/a><\/strong>, so you\u2019ll need to browse the GitHub page to find all the different methods & options<\/strong>. Specifically, the options page<\/a><\/strong> has a lot to go through and might take a while to find what you want.<\/p>\n
    Thankfully, Cleave has plenty of live examples<\/strong> you can study and replicate. These examples are also free to download<\/strong> from the GitHub repo<\/a>. If you want to see more live examples<\/strong> visit the Cleave.js home page<\/a><\/strong> or check out this fiddle<\/a><\/strong> jam-packed with demos.<\/p>\n