Clear Button in Bootstrap Input Group Component

You may also like...

12 Responses

  1. Volvoxe says:

    What a great solution. I use it as a hint (question mark) within an input. Looks very slick to me.

  2. priyanka says:

    hello , I used the function but the icon to remove text is not appearing when i write anything. Who can help me to solve this ? Thank you.

  3. Gustavo says:

    Great solution!!!!

  4. peppe says:

    hello , I used the function but the icon to remove appears in a line below . Who can help me solve ? Thank you.

  5. Eric Lavrilleux says:

    Thanks a lot, that works very well.
    I’m trying to do it with clear button visible on focus in and hidden on focus out.
    My problem is that it disappear when I click on it.
    Do you know how to do it ?

    • Hi Eric, you can bind the focus and blur events on the input element as shown below.

      $('.has-clear input[type="text"]').on('focus input propertychange', function() {
        var $this = $(this);
        var visible = Boolean($this.val());
        $this.siblings('.form-control-clear').toggleClass('hidden', !visible);
      }).on('blur', function() {
        $(this).siblings('.form-control-clear').addClass('hidden');
      }).trigger('propertychange');
      

      Example here: http://codepen.io/frosdqy/pen/MyeGEy

      • Eric Lavrilleux says:

        Thanks Hendy, that’s what I did, but when you click on the clear button, the input is not clearing.

        • Oops, sorry, didn’t notice that. You can return false;() in the clear button’s mousedown event to prevent the input’s blur event from being triggered.

          $('.form-control-clear').on('mousedown', function() {
              return false;
          }).click(function() {
            $(this).siblings('input[type="text"]').val('')
              .trigger('propertychange').focus();
          });
          

          Updated pen: http://codepen.io/frosdqy/pen/MyeGEy

Leave a Reply

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