TextClear
===========================================================================
textClear.js v0.0.3
jQuery Plugin to clear input field text on fly - like as provided in Internet Explorer 10
Requires - textClearStyle.css and jquery lib(>1.6)
jQuery Plugin Link: Check Here
For Demo: Click Here
Features:
➊ ▏On keyPress it provides ✘ image on the extreme right corner of the input field to clear out the text
➋ ▏Handles multiple input fields
➌ ▏Cross Image changeable via CSS
➍ ▏Ohhh!! 4th feature provdies 4 fancy cross images for usage under images directory
Note: It overrides the IE-10's default ✘ image so as to offer the same look and feel on all browsers.
Usage:
✔ Add noTextClear class in all those text input fields in which you want to apply the plugin effect like as follows:
<body>
...
...
Name: <input id="txt" class="noTextClear" type="text" /><br/>
Email: <input id="email" class="noTextClear" type="email" /><br/>
Telephone No.: <input id="tel" class="noTextClear" type="tel" /><br/>
Password: <input type="password" class="noTextClear" />
...
...
</body>
✔ Inside HTML Head Tag add path to jquery and textClear.js and supporting stylesheet textClearStyle.css.
■ You may need to change the paths depending on your folder structure.
<html>
<head>
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="textClear.js"></script>
<link rel="stylesheet" href="textClearStyle.css" type="text/css"/>
</head>
<body>
...
</body>
</html>
✔ Now Call textClear() in your JavaScript file using $('.noTextClear') selector as: $('.noTextClear').textClear();
✔ And to change ✘ image: simply browse inside textClearStyle.css and change its background-image property as follows inside .crossClear class: background-image: url('YourImageUrl');
■ And Of course you can choose other images provided in images directory as well