关于input的监听聚焦事件

Posted arunoido

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于input的监听聚焦事件相关的知识,希望对你有一定的参考价值。

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

 

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

  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. 有时候,正是因为没有答案,才会让你踏出这一步,开始自己的新的旅程。

以上是关于关于input的监听聚焦事件的主要内容,如果未能解决你的问题,请参考以下文章

关于实时监听input的值得变化的问题

iscroll4 input textarea不能获得焦点问题

jquery监听动态添加的input的change事件

001.input添加监听事件

字节小程序关于在安卓机型下input聚焦时内容被撑走

由一个聚焦-focus-事件异常跟踪引起的总结