[HTML]input 박스에 X 버튼 삽입

[2021.05.07]

Input 박스에 X 표시를 넣는 방법 입니다.

X 표시를 넣었다고 해서 데이터가 삭제되거나 그러지는 않습니다.

 

HTML

<input id="TEST_ID" class="input_FontSize form-control form-control-sm " autocomplete="off" type="text" />
<span class="searchclear" style="display:none">X</span>

 

CSS

.TEST_ID[type=text]:-ms-clear{display: none;}
.searchclear {position: absolute;right: 6px;top: 7px;bottom: 15px;width: 10px;height: 14px;margin: auto;font-size: 15px;cursor: pointer;color: #ccc;background-color: #fff;}

 

JavaScript (Jquery)

$(document).on("keyup",".searchclear",function () {
	$(".searchclear").toggle(Boolean($(this).val())); //영역 
});