[Bootstrap] Input 태그의 Clear 버튼

Bootstrap 의 Input 태그 사용시 아래와 같이 입력한 text를 지우는 기능을 넣는 방법에 대한 코드

HTML

view source

print?

01.<div class="input-group">

02.    <div class="form-group has-feedback has-clear">

03.        <input type="text" class="form-control" placeholder="Enter">

04.        <span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span>

05.    </div>

06.    <div class="input-group-btn">

07.     <!-- button code... -->

08.    </div>

09.</div>

10.});

CSS

view source

print?

1.::-ms-clear {

2.  display: none;

3.}

4..form-control-clear {

5.  z-index: 10;

6.  pointer-events: auto;

7.  cursor: pointer;

8.}

JavaScript

view source

print?

01.$('.form-control').on('input change', function() {

02.  var $this = $(this);

03.  var visible = Boolean($this.val());

04.  $('.form-control-clear').toggleClass('hidden', !visible);

05.}).trigger('propertychange');

06. 

07.$('.form-control-clear').on('click', function() {

08.  $('.form-control').val('').trigger('change').focus();

09.  $(this).toggleClass('hidden', true);

10.});

Reference: https://codepen.io/frosdqy/pen/grbxGW