JavaScript
[html/css] input태그에 글 입력 시 아이콘/이미지 활성화 시키기
kimnaa
2020. 11. 17. 20:15
반응형
input태그에 글 입력 시 아이콘/이미지 활성화 시키기
HTML에서 버튼을 비활성화 시키는 것은 disabled을 사용하면 되지만, 아이콘이나 이미지파일에 input 태그에 입력 시 효과를 주려면 간단한 자바스크립트로 가능합니다.
1. javascript
<script>
$(document).ready(function() { //
$("#searchbox").on('input', function() {
if ($("#searchbox").val() == '') {
$('.btn.btn-s.btn-gray2').css({
'display': 'none'
});
$('.btn.btn-s.btn-gray').css({
'display': 'inline-block'
});
} else { // input
$('.btn.btn-s.btn-gray').css({
'display': 'none'
});
$('.btn.btn-s.btn-gray2').css({
'display': 'inline-block'
});
}
});
})
</script>
검색란(input태그 "searchbox")에 입력이 되어 있으면 활성화버튼(btn-gray2)는 안보이고, 비활성화버튼(btn-gray)버튼만 인라인 블럭 속성으로 보이게 합니다.
반대인 경우는 else로 설정합니다.
2.html
<body>
<input name="searchbox" id="searchbox" type="text" /placeholder=" 검색어를 입력하세요">
<div class="box">
<button type="text" class="btn btn-s btn-gray"><i class="fas fa-search"></i></button>
<button type="text" class="btn btn-s btn-gray2"><i class="fas fa-search"></i></button>
</div>
</body>같은 아이콘을 나란히 두개 넣은 후 위치를 css로 겹치게합니다
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
fontawesome에서 돋보기 모양 아이콘을 가져와 사용하였습니다
3.CSS
*{margin:0px;padding:0px;box-sizing:border-box;}
html{height:100%;min-height: 100%;background:#fff;}
body{height:100%;min-height: 100%;background:#f1f1f1;font-family: 'NanumGothic','NanumSquare', sans-serif;box-sizing:border-box;}
button{cursor:pointer; width: 44px; height: 44px; float:left;}
i{font-size: 16px;}
ul{list-style:none;}
body{
margin: 100px;
}
input{
height: 44px; width: 300px; float:left;
border: 1px solid pink;
border-right: 1px solid transparent;
}
.box> .btn-gray{
background: pink; color: white;
border: 1px solid transparent;
border-radius: 5px;
}
.box> .btn-gray2{
position: relative;
top: 0px;
left: -44px;
}
반응형