jQuery Plugin to clear input field text on fly - like as provided in Internet Explorer 10

Download .zip Download .tar.gz View on GitHub


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

➊ ▏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.


✔ Add noTextClear class in all those text input fields in which you want to apply the plugin effect like as follows:

    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" />

✔ 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.

    <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"/>

✔ Now Call textClear() in your JavaScript file using $('.noTextClear') selector as:

✔ 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

Twit this Page: