테스트 사이트 - 개발 중인 베타 버전입니다

텍스트 검색창

· 3년 전 · 2269 · 1

기존에 검색 마킹시스템에서 검색바를 추가 했습니다.

검색을 종료하고싶을때는 리프레쉬버튼을 클릭하여 페이지를 리로드 합니다. 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    <li class="searchCon"><i class="fas fa-search" style="cursor:pointer;"></i></li>
      <li class="searchBar">
      <form id="f1" name="f1" action="javascript:void()">
        <input type="text" id="t1" name="t1" style="width:60px; font-size:20px; border:1px solid #eee;">
        <input type="button" value="검색" id="search_btn" style="font-size:16px; border:1px solid #eee; background-color:pink; padding:5px; color:white; border-radius:5px; cursor:pointer;">
      </from>
      </li>
 
 
 
    <script>
      let searchCon = document.querySelector(".searchCon");
      let textinput = document.querySelector(".searchBar");
      let searchIcob = document.querySelector(".fa-search");
      textinput.style.display = "none";
 
      searchCon.onclick = function searchBar(){
        
        if(textinput.style.display == "none" && searchCon.className == "searchCon"){
          searchCon.className += " searchOn"
          textinput.style.display = "";
          searchIcob.className = "fas fa-sync-alt";
        } else {
          searchCon.className = "searchCon"
          textinput.style.display = "none";
          history.go(0);
        }
      }
    </script>
cs

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 1개

감사합니다!!

게시글 목록

번호 제목
24149
24140
24133
24125
24119
24109
24105
24101
24093
24089
24077
24074
24071
24070
24067
24056
24050
24046
24043
24040
24037
24036
24035
24034
24021
24017
24005
24002
23990
23980