Bootstrap Input 태그의 Clear 버튼 구현

참고 : https://leechwin.tistory.com/entry/Bootstrap-Input-%ED%83%9C%EA%B7%B8%EC%9D%98-Clear-%EB%B2%84%ED%8A%BC

 

$(document).ready(function(){
	/* clear 버튼 */
	$('.form-control').on('input propertychange', function() {
	  var $this = $(this);
	  var visible = Boolean($this.val());
	  $this.siblings('.form-control-clear').toggleClass('hidden', !visible);
	}).trigger('propertychange');
	
	$('.form-control-clear').click(function() {
	  $(this).siblings('input[type="text"]').val('').trigger('propertychange').focus();
	});
});

 

/* clear 관련 css */
:-ms-clear {
	display: none;
}
.form-control-clear {
	z-index: 10;
	pointer-events: auto;
	cursor: pointer;
	color: #d5d5d5;
}

 

<div class="inputs"> 
	<div class="form-group has-feedback has-clear">							
		<input type="text" class="mTextArea FontSize1 FontBold FontColor2 form-control"  id="nick" value="${info.nickname}" >
		<span class="form-control-clear glyphicon glyphicon-remove form-control-feedback hidden"></span>		
	</div>
</div>