如何製作一個點選就會變長，點頁面就會變短的搜尋框，我們要用到的是JS，以及兩個方法

一：onfocus       //焦點取得

二：onblur         //焦點失去

我們只要在點選時觸發焦點獲取事件，就能讓他變長

失去焦點時，就會觸發失去焦點的函式，使搜尋框變回原來的長度

HTML部分：

<input type="serch" id="serch" onfocus="bc()" onblur="lk()" placeholder="搜尋其實很簡單">

CSS部分：

#serch{        
            
            right: 50px;
            top: 20px;
            height: 30px;;
            width: 250px;
            border-radius: 5px;
            font-size: 15px;
            transition: 0.5s;              //過渡動畫時間
            background-color: rgb(175, 200, 223);
            border: none;
        }
 

JS部分：

<script>
        function bc(){                //搜尋框取得焦點時觸發的事件
            document.getElementById("serch").style.width='400px';
        }
        function lk(){               //搜尋框失去焦點時觸發的事件
            document.getElementById("serch").style.width='250px';
        }
    </script>