[Bootstrap] Input 태그의 Clear 버튼

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

HTML

    

        
        
    
    

     
    

});

CSS

::-ms-clear {
  display: none;
}
.form-control-clear {
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
}

JavaScript

$('.form-control').on('input change', function() {
  var $this = $(this);
  var visible = Boolean($this.val());
  $('.form-control-clear').toggleClass('hidden', !visible);
}).trigger('propertychange');

$('.form-control-clear').on('click', function() {
  $('.form-control').val('').trigger('change').focus();
  $(this).toggleClass('hidden', true);
});

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