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>
Code language: HTML, XML (xml)

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; }
Code language: CSS (css)

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(); });
Code language: JavaScript (javascript)

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)

Get our Articles via Email. Enter your email address.

You may also like...

17 Comments

  1. FH says:

    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

  2. Mehdi Jalal says:

    Thanks alot

  3. Thomas says:

    not work if go with autofocus…..

  4. Vijay says:

    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

  5. Gavin says:

    Example doesn’t work ? (IE9)

  6. Andrew says:

    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().

    • Thanks Andrew.. I have fixed the plugin now.

  7. Josh says:

    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!??

  8. LouieK says:

    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.

  9. Stephan says:

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

  10. joeynoindians says:

    wow

  11. Temidayo says:

    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.

  12. Pradip Rupareliya says:

    thank you so much…

    its become a very helpful to me..

  13. Anthony Hunt says:

    I added a “trigger” to the line in the .clearlink click event:-

    $(this).prev().val('').focus().trigger("change");
    

    So that other code was triggered when the field was cleared.

    I also added a hover property to the CSS to make the icon change when highlighted.

    a.clearlink:hover {
    	background: url("close-button.png") no-repeat scroll -24px 0;
    }
    

    Thanks for the example code. Very helpful.

    • kaartik says:

      In chrome, the below line

      $(this).prev().val(”).focus().trigger(“change”); is not working.

      After i use the above code to reset the values, the old entry is coming up on mouse hover and element focus.

      is there anyway to fix this issue?

  14. Satish Patel says:

    I cannot see the close button. That’s why this demo doesn’t seem useful to me right now

  15. divp says:

    Thanks a lot but Code still doesn’t working with both CSS and Java script too

Leave a Reply

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