关于input的监听聚焦事件

今天是打算开始实战自己一直要写的网站，然后开始疯狂的翻网站找灵感，在路过阿里云的时候，突然发现——欸？这个输入框的效果看着可以欸，于是乎，电源一拔坐了起来，分析效果。

其实这个效果并不难理解：

　　1. 当鼠标指向的时候，文本框会拉长 ；

　　2. 当鼠标移开的时候，文本框会恢复原来长度；

　　3. 当点击输入框后，光标在输入框中聚焦后，鼠标再移开，它会保持拉长后的长度；

　　4. 当失去聚焦的时候，文本框长度再次缩短；

一分析完，就开始埋头劈里啪啦的一阵猛敲：

第一步鼠标经过的算是解决了，终于遇到了正真的问题：

　　不知道如何监听聚焦事件，找了很多篇文章，基本上都是说用这种方法可以获取聚焦：

1 

……这哪是监听聚焦事件啊，这就是默认把光标停在input里面嘛，根本没有解决我的问题。

无奈之下，只好开始各种令人无语的尝试，几乎所有的可能性都试过了，抱着试试的心理，敲下了一段addEventListener(); 在一种似乎是巧合的情况下，我在监听事件里的语法提示中找到了focus 和 blur ！！

于是就有了接下来的内容：

 1 

到这里的时候，已经能看到效果了，分析出来的四个条件都满足了，但是，就这样了么？

　　很明显不行啊，颜色什么的都没有调，用户体验一定很不爽对不对？而且改一个样式你得要写一堆代码对不对？代码没有封装以后每次都要重新copy累不累？

　　其实这样写还有一个小问题：

　　　　hover标签在这里成了一次性的快餐盒(如果有心情的话可以去试试~~)

　　　　后来又加了一句 search[0].value = null; 来清除文本框内的内容，为了测试是不是因为里面有了内容才会让hover这个伪类失效的...但是事实并非是input内容的问题。

当时也不是很在意这个问题，也就将它放了放，开始解决前面几个问题……全靠js写的话，一定要写大量完全不需要写的代码，再加上二次分析了阿里的网站，我发现了完全可以用js来更换html的网页的class属性——于是又写了一个类，用js去交替两个样式，下面贴出完整代码：

 1 
 2 
 3 
 4     
 5     
 6 
 7 
 8 
70 
71 
72 
73 

74     

75         
76     
77 
78 
79 
80 
81 
95 
96 

神奇的是，因为样式的交错，刚好让hover标签从一次性便成了用完后自动恢复至初态！！

嗯，在最后总结下，总结的东西不多，但是等到将来的某一天回头望去，能够看到过去各种奇奇怪怪的思维锚点：

　　1. input的聚焦监听可以使用addEventListener(focus, function(){}); 来实现。

　　2. 很多事情都不需要去考虑，大多数情况做好自己的事情，自己所在意的东西就会迎刃而解。

　　3. 有时候，正是因为没有答案，才会让你踏出这一步，开始自己的新的旅程。