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
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="" 
<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.


This awesome jQuery plugin is developed by twf-nikhila. For more Advanced Usages, please check the demo page or visit the official website.