Auto Format Form Fields When Typing - jQuery Smart Formatter

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.