今天是打算開始實戰自己一直要寫的網站，然后開始瘋狂的翻網站找靈感，在路過阿里雲的時候，突然發現——欸？這個輸入框的效果看着可以欸，於是乎，電源一拔坐了起來，分析效果。
其實這個效果並不難理解：
1. 當鼠標指向的時候，文本框會拉長 ；
2. 當鼠標移開的時候，文本框會恢復原來長度；
3. 當點擊輸入框后，光標在輸入框中聚焦后，鼠標再移開，它會保持拉長后的長度；
4. 當失去聚焦的時候，文本框長度再次縮短；
一分析完，就開始埋頭劈里啪啦的一陣猛敲：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>個人比較喜歡用18號字, Fira Code, 行距 1.02 看着特舒服</title>
</head>
<style>
.search{
width: 10rem; /* 初始寬度 */
font-size: 1.1rem;
color: ghostwhite;
padding: 0.411rem 1rem; /* 為了讓輸入框文本在中心(當時寫的時候沒有注意到這點，直接設置的高度，導致輸入聚焦有點偏了...) */
background-color: #0001;
border: 1px solid #7b4aff;
-webkit-border-radius: 0.2rem; /* 圓角 */
-moz-border-radius: 0.2rem;
border-radius: 0.2rem;
-webkit-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76); /* 變換動畫1.2s 速度使用貝塞爾曲線 */
-moz-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
-ms-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
-o-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
}
.search:hover{
width: 22rem; /* 光標經過拉長 */
border: 1px solid #7b4aff;
background-color: rgba(18, 18, 39, 0.4);
-webkit-border-radius: 0.2rem;
-moz-border-radius: 0.2rem;
border-radius: 0.2rem;
}
</style>
<body>
<header>
<div class="topBar">
<input class="search" type="text" value=""/>
</div>
</header>
</body>
</html>
第一步鼠標經過的算是解決了，終於遇到了正真的問題：
不知道如何監聽聚焦事件，找了很多篇文章，基本上都是說用這種方法可以獲取聚焦：
1 <script>
2 document.getElementById('search').focus(); 3 </script>
……這哪是監聽聚焦事件啊，這就是默認把光標停在input里面嘛，根本沒有解決我的問題。
無奈之下，只好開始各種令人無語的嘗試，幾乎所有的可能性都試過了，抱着試試的心理，敲下了一段addEventListener(); 在一種似乎是巧合的情況下，我在監聽事件里的語法提示中找到了focus 和 blur ！！
於是就有了接下來的內容：
1 <script>
2 var search = document.getElementsByClassName('search'); // 根據class名稱獲取標簽 返回的是一個數組
3
4 search[0].addEventListener('focus', function(){ // 監聽光標聚焦事件
5 search[0].style.width = 22 + 'rem'; // 選中保持拉長狀態
6 }) 7
8 search[0].addEventListener('blur', function(){ 9 search[0].style.width = 10 + 'rem'; // 未被選中的時候恢復狀態
10 search[0].value = null; // 清空內容
11 }) 12
13 </script>
到這里的時候，已經能看到效果了，分析出來的四個條件都滿足了，但是，就這樣了么？
很明顯不行啊，顏色什么的都沒有調，用戶體驗一定很不爽對不對？而且改一個樣式你得要寫一堆代碼對不對？代碼沒有封裝以后每次都要重新copy累不累？
其實這樣寫還有一個小問題：
hover標簽在這里成了一次性的快餐盒(如果有心情的話可以去試試~~)
后來又加了一句 search[0].value = null; 來清除文本框內的內容，為了測試是不是因為里面有了內容才會讓hover這個偽類失效的...但是事實並非是input內容的問題。
當時也不是很在意這個問題，也就將它放了放，開始解決前面幾個問題……全靠js寫的話，一定要寫大量完全不需要寫的代碼，再加上二次分析了阿里的網站，我發現了完全可以用js來更換html的網頁的class屬性——於是又寫了一個類，用js去交替兩個樣式，下面貼出完整代碼：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>標題會變欸~~~</title>
6 </head>
7
8 <style>
9 * {
10 padding: 0px;
11 margin: 0px;
12 box-sizing: border-box;
13 }
14
15
16 /*********************************** header ***********************************/
17
18 .topBar{
19 width: 100%;
20 height: 10rem; /* 160px */
21 }
22
23 /* 搜索條的顏色變化 */
24 .search{
25 width: 10rem;
26 font-size: 1.1rem;
27 color: ghostwhite;
28 padding: 0.411rem 1rem;
29 background-color: #0001;
30 border: 1px solid #7b4aff;
31
32 -webkit-border-radius: 0.2rem;
33 -moz-border-radius: 0.2rem;
34 border-radius: 0.2rem;
35 -webkit-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
36 -moz-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
37 -ms-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
38 -o-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
39 transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
40 }
41
42 .search:hover{
43 width: 22rem;
44 border: 1px solid #7b4aff;
45 background-color: rgba(18, 18, 39, 0.4);
46 -webkit-border-radius: 0.2rem;
47 -moz-border-radius: 0.2rem;
48 border-radius: 0.2rem;
49 }
50
51 .search-bar-on-selected{
52 width: 22rem;
53 font-size: 1.1rem;
54 color: ghostwhite;
55 padding: 0.411rem 1rem;
56 background-color: rgba(18, 18, 39, 0.4);
57 border: 1px solid #7b4aff;
58
59 -webkit-border-radius: 0.2rem;
60 -moz-border-radius: 0.2rem;
61 border-radius: 0.2rem;
62 -webkit-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
63 -moz-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
64 -ms-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
65 -o-transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
66 transition: 1.2s cubic-bezier(0.46, 0.26, 0.22, 0.76);
67 }
68
69 </style>
70
71 <body>
72
73 <header>
74 <div class="topBar">
75 <input class="search" type="text" value=""/>
76 </div>
77 </header>
78
79 </body>
80
81 <script>
82 var search = document.getElementsByClassName('search'); 83
84 // 搜索條選中和移除事件 修改class名稱的方法能更好的封裝代碼
85 search[0].addEventListener('focus', function(){ 86 search[0].className = 'search-bar-on-selected'; // 更改類名
87 }) 88
89 search[0].addEventListener('blur', function(e){ 90 document.getElementsByClassName('search-bar-on-selected')[0].className = 'search'; // 因為類名已經改變了，所以要重新獲取下類名(總想到Java了)
91 search[0].value = null; // 清空內容
92 }) 93
94 </script>
95
96 </html>
神奇的是，因為樣式的交錯，剛好讓hover標簽從一次性便成了用完后自動恢復至初態！！
嗯，在最后總結下，總結的東西不多，但是等到將來的某一天回頭望去，能夠看到過去各種奇奇怪怪的思維錨點：
1. input的聚焦監聽可以使用addEventListener(focus, function(){}); 來實現。
2. 很多事情都不需要去考慮，大多數情況做好自己的事情，自己所在意的東西就會迎刃而解。
3. 有時候，正是因為沒有答案，才會讓你踏出這一步，開始自己的新的旅程。