今天是打算开始实战自己一直要写的网站，然后开始疯狂的翻网站找灵感，在路过阿里云的时候，突然发现——欸？这个输入框的效果看着可以欸，于是乎，电源一拔坐了起来，分析效果。
其实这个效果并不难理解：
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. 有时候，正是因为没有答案，才会让你踏出这一步，开始自己的新的旅程。
原文地址：https://www.cnblogs.com/Arunoido/p/10463792.html