소금디자인

텍스트 검색창

· 2022-01-07 (금) 09:33:10 · 4390 · 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개

2022-01-07 (금) 12:40:52
감사합니다!!
댓글을 작성하시려면 로그인이 필요합니다.

그누보드5 팁자료실

2,788건
+
제목 글쓴이 날짜 조회
22-01-07 조회 4,489
22-01-07 조회 4,391
22-01-04 조회 4,936
22-01-03 조회 6,563
21-12-30 조회 5,073
21-12-30 조회 5,507
21-12-26 조회 6,042
21-12-19 조회 5,212
21-12-18 조회 5,467
21-12-17 조회 4,620
21-12-14 조회 5,115
21-12-10 조회 9,160
21-12-10 조회 4,869
21-12-08 조회 8,823
21-12-08 조회 1.1만
21-12-07 조회 5,837
21-12-04 조회 6,143
21-12-04 조회 4,776
21-12-03 조회 5,506
21-12-02 조회 4,862
21-12-02 조회 5,365
21-12-02 조회 5,103
21-12-02 조회 4,588
21-11-30 조회 5,620
21-11-23 조회 5,692
21-11-23 조회 4,811
21-11-23 조회 6,347
21-11-23 조회 5,337
21-11-23 조회 4,514
21-11-22 조회 5,441