728x90
반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>토글 서치 박스</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous" />
</head>
<body>
<style>
/* 검색창 CSS 시작 */
#search_box .button_toggle {display: none; /* 토글 전 */ }
#search_box .button_toggle.b_toggle {display: inline; /* 토글 후 */ }
#search_box .button_init {display: inline; /* 토글 전 */ }
#search_box .button_init.a_toggle {display: none; /* 토글 후 */ }
#search_box {width: 250px; background: #eee; -webkit-flex-direction:row-reverse; position: ralative; max-width: auto; height: auto; margin: auto; float:right; }
#search_box button, input {border: 0;} /* 서치박스 버튼 인풋 테두리 없음 설정 */
#search_box .button_init .btn_search {position: ralative; background: none; color: #000; cursor: pointer; float:right; font-size: 22px; overflow: hidden;} /* 돋보기 버튼 설정 */
#search_box .button_toggle .inp_txt_search {margin : 3px; position: ralative; width: 200px; height: 22px; border:1px solid #000; border-radius:15px; font-size: 20px;} /* 입력창*/
#search_box .button_toggle .btn_search_del {float:right; cursor: pointer; font-size: 14px; background: none; margin : 1px -3px; }
/* 검색창 CSS 끝 */
s
ㄴ
</style>
<!-- 서치박스 시작 -->
<div id="search_box">
<div class="button_init" >
<button class="btn_search"><i class="fas fa-search fa-1x"></i><span class="blind"></span></button>
<!-- btn_search 클릭하면 나옴 /-->
</div>
<div class="button_toggle" <!-- 서치 버튼 클릭시 토글 영역 /-->
<s_search>
<input type="text" name="" title="Search" placeholder="검색 내용 입력..." value="" class="inp_txt_search" onkeypress="javascript:if (event.keyCode == 13) { }" >
<button type="button" title="검색어 삭제" class="btn_search_del"><i class="fas fa-times-circle fa-2x"></i></button>
</s_search>
</div>
</div>
<!-- 서치박스 스크립트 시작 -->
<script>
const b_button = document.querySelector('.button_init'); // class용 메서드
const c_button = document.querySelector('.button_toggle'); // class용 메서드
const del_button = document.querySelector('.btn_search_del'); // class용 메서드
b_button.addEventListener('click', function() {
c_button.classList.toggle('b_toggle'); // 토글할 클래스 이름
b_button.classList.toggle('a_toggle'); // 토글할 클래스 이름
});
del_button.addEventListener('click', function() {
var typped = document.getElementsByClassName('inp_txt_search')[0].value;
if (typped) //내용이 있을때
{
document.getElementsByClassName('inp_txt_search')[0].value=null; //내용이 있을때 값 비우기
document.getElementsByClassName('inp_txt_search')[0].focus(); //내용이 있을때 포커스 주기
}
else
{
document.getElementsByClassName('inp_txt_search')[0].value=null; //내용이 없을때 값 비우기
c_button.classList.toggle('b_toggle'); // 내용이 있을때 토글하기
b_button.classList.toggle('a_toggle'); // 토글할 클래스 이름
}
});
</script>
<!-- 서치박스 스크립트 끝 -->
</body>
</html>728x90
반응형
'Computer Tip's > Web' 카테고리의 다른 글
| 티스토리 스킨 제작기 #1 향후과제 (0) | 2024.06.17 |
|---|---|
| 티스토리 스킨제작 검색창 오류 수정기(검색내용이 처리 안됨) (0) | 2024.06.17 |
| 티스토리 스킨 제작기 #1(stl_Skin_V_2023)_1차 수정 내용(230911) (0) | 2023.09.11 |
| 티스토리 스킨 제작기 #1(stl_Skin_V_2023) (0) | 2023.09.11 |
| 구글 애드센스 카카오 뱅크 SWIFT 코드 변경 (0) | 2023.04.12 |
댓글
현재 wrapper 화면 크기 : 1264*4749