Create a Clearable TextBox with jQuery

clearable-textbox-jquery

Recently I came across a wonderful article by David Walsh on Clearable Textboxes with Dojo Toolkit [link]. This is a simple implementation where a clear button (x) added in a textbox which lets user to clear the content of the textbox. I have seen this simple feature in many websites and feel its very useful to have. It increase the usability of form.

I thought to implement the same feature using jQuery. Here is a simple plugin that I wrote to add clearable feature to any textbox in your HTML form. All you need is to call clearable() method on the textbox. For example.

 
...
...
<script type="text/javascript" src="jquery.clearable.js"></script>
<link rel="stylesheet" href="jquery.clearable.css" 
       type="text/css" media="screen" />
 
...
...
 
<input type="text"  class="foo"></input>
 
<script>
$(document).ready(function() {
	$('.foo').clearable();
});
</scrip>

In above example we included jquery.clearable plugin javascript and stylesheet files. Then called .clearable() method on the textboxes we want to add clearable feature. That’s it :-)

Let us go through the code and see what exactly goes behind the scene in jquery clearable plugin.

The CSS

We use following stylesheet classes internally to display the

.divclearable {
	border: 1px solid #888;
	display: -moz-inline-stack;
	display: inline-block;
	zoom:1;
	*display:inline;
	padding-right:5px;
	vertical-align:middle;
}
 
a.clearlink {
	background: url("close-button.png") no-repeat scroll 0 0 transparent;
	background-position: center center;
	cursor: pointer;
	display: -moz-inline-stack;
	display: inline-block;
	zoom:1;
	*display:inline;
	height: 12px;
	width: 12px;
	z-index: 2000;
	border: 0px solid;
}

There are two css classes we uses in clearable plugin. First one is for a wrapper DIV which wraps around the textbox and clear button (x). And the style class is for clear button (x).

The JavaScript

The important bit of the plugin is javascript code that creates clearable effect. For everytextbox, we wrap it around a DIV container and also add one clear button (x) in this container DIV.

Here is the jQuery code:

	$(this).css({'border-width': '0px', 'outline': 'none'})
		.wrap('<div id="sq" class="divclearable"></div>')
		.parent()
		.attr('class', $(this).attr('class') + ' divclearable')
		.append('<a class="clearlink" href="javascript:"></a>');
 
	$('.clearlink')
		.attr('title', 'Click to clear this textbox')
		.click(function() {
 
			$(this).prev().val('').focus();
 
	});

In above javascript code, we do:

  1. Remove border and outline of the textbox where we want to add clearable feature
  2. Create a DIV wrapper and wrap the textbox with that DIV
  3. Add the textbox style class to DIV, so the border / background etc that are specified on textbox are added to DIV
  4. Create a link for clear text(x) and append in the DIV

Also for each clear text link (x) we add an onclick handler where we clear the corresponding textbox and set focus in it.

Try Demo

View demo

Download jQuery Clearable Plugin

Clearable plugin (zip, 4kb)



13 Comments

  • FH 20 September, 2011, 21:06

    Thanks!

    2 extra features would be great:

    The clear button (x) does not show until a user has actually typed a character in the field
    As you are about to hover/click the (x) button, it should also visually change – maybe go darker

  • Mehdi Jalal 5 June, 2012, 13:45

    Thanks alot

  • Thomas 6 August, 2012, 9:39

    not work if go with autofocus…..

  • Vijay 11 September, 2012, 21:48

    Hi,

    The clear button (x) does not show until a user has actually typed a character in the field.Could you please provide one sample program?

    Thanks

  • Gavin 1 February, 2013, 21:03

    Example doesn’t work ? (IE9)

  • Andrew 2 February, 2013, 6:08

    FYI, you are including jquery-latest.js (1.9.0) and they have removed the .live() event which is breaking your code and demo. Needs to be replaced with .on().

    • Viral Patel 2 February, 2013, 15:35

      Thanks Andrew.. I have fixed the plugin now.

  • Josh 21 February, 2013, 17:10

    Code still doesn’t seem to work (Chrome Latest)
    You need to close

    <script>

    properly because you put

    </scrip>

    I have also no idea why but in the example (downloadable) the icon is not showing (at all).
    I can use your demo that is on the website though!??

  • LouieK 25 February, 2013, 18:45

    I’ve been searching for a way to do this for awhile after I saw the jquery xeditable plugin. I’m too much of a js/jquery noob to try and recreate it from scratch so Thank you for providing the groundwork for me. It’s a great feature to have.

  • Stephan 30 March, 2014, 5:39

    Cool
    BUT I would like to change a object on the DOM when I click the (X)

  • joeynoindians 25 June, 2014, 23:35

    wow

  • Temidayo 31 October, 2014, 14:48

    Hi,
    I created some buttons that has some numbers in them like a number keypad and i also have a textbox on top of it and i wanted to know if there is a java script that i can use that once i click the button that has maybe number 1, then 1 should be shown in the textbox and i also have a button that says “c” which means cancels that once i press it, it deletes or cancels the the number that i pressed before.
    Thanks.

  • Pradip Rupareliya 12 November, 2014, 11:16

    thank you so much…

    its become a very helpful to me..

Leave a Reply

Your email address will not be published. Required fields are marked *

Note

To post source code in comment, use [code language] [/code] tag, for example:

  • [code java] Java source code here [/code]
  • [code html] HTML here [/code]

Current ye@r *