Auto Format Form Fields When Typing - jQuery Smart Formatter
File Size: | 8.29 KB |
---|---|
Views Total: | 2192 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Smart Formatter is a jQuery form formatter plugin which automatically formats form fields (e.g. input fields, textarea elements) while typing.
Features & Formatters:
- uc: Transforms all into uppercase.
- ucfirst: Transforms only first character of each word into uppercase.
- sc: Transforms the sentence into sentence case, capitalize word after (., ?, !).
- lc: Transforms all into lowercase.
- numbers: Allows only numbers in input fields.
- money: Converts input field value into money format.
- select-all: When input field is clicked select all value of it.
How to use it:
1. Download and include the smart-formatter.js
script after jQuery JavaScript library.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"> </script> <script src="smart-formatter.js"></script>
2. Apply the formatters to the form fields using the sf
attribute:
Name Prefix: <input type="text" name="nameprefix" sf="uc select-all" placeholder="Uppercase and Select all"> First name: <input type="text" name="firstname" sf="ucfirst" placeholder="Uppercase first only"> Last name: <input type="text" name="lastname" sf="ucfirst" placeholder="Uppercase first only"> Company: <input type="text" name="company" sf="ucfirst" placeholder="Uppercase first only"> Your Message: <textarea sf="sc select-all" placeholder="Sentence case - Auto capitalize words after '.(Full Stop)', '! (Exclamation)', '? (Question mark)' and Select all" rows=4 cols=80></textarea> Numbers of staffs: <input type="text" name="company" sf="numbers" placeholder="Accepts only number"> Turnover: <input type="text" name="budget" sf="money" placeholder="Money format"> Registration number: <input type="text" name="registrationNumber" sf="lc" placeholder="Lowercase">
3. Call the function on the form
tag and done.
$(function(){ $('form').smart_format(); });
This awesome jQuery plugin is developed by twf-nikhila. For more Advanced Usages, please check the demo page or visit the official website.