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.

 
...
...


 
...
...
 

 

			


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]