/TextClear

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

Primary LanguageJavaScriptMIT LicenseMIT

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)


**Website:** http://exexzian.github.io/TextClear/
**jQuery Plugin Link:**: http://plugins.jquery.com/textClear/
**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="jquery.min.js"></script>
	<script type="text/javascript" src="clearme.min.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