關於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

.search:hover


style
>
<
body
>
<
header
>
<
div 
class
="topbar"
>
<
input 
class
="search"
type
="text"
value
=""/>
div>
header
>
body
>
html
>

第一步滑鼠經過的算是解決了，終於遇到了正真的問題：

1
<
script
>
2document.getelementbyid(
'search
').focus();
3script
>

……這哪是監聽聚焦事件啊，這就是預設把游標停在input裡面嘛，根本沒有解決我的問題。

無奈之下，只好開始各種令人無語的嘗試，幾乎所有的可能性都試過了，抱著試試的心理，敲下了一段addeventlistener(); 在一種似乎是巧合的情況下，我在監聽事件裡的語法提示中找到了focus 和 blur ！！

於是就有了接下來的內容：

1
<
script
>
2var
search 
=document.getelementsbyclassname(
'search
'); 
//根據class名稱獲取標籤 返回的是乙個陣列34
search[
0].addeventlistener(
'focus', 
function
())7
8search[
0].addeventlistener(
'blur', 
function
())12
13script
>

到這裡的時候，已經能看到效果了，分析出來的四個條件都滿足了，但是，就這樣了麼？

很明顯不行啊，顏色什麼的都沒有調，使用者體驗一定很不爽對不對？而且改乙個樣式你得要寫一堆**對不對？**沒有封裝以後每次都要重新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
>
6head
>78
<
style
>9* 
1415
16/*
********************************** header **********************************
*/17
18.topbar
2223
/*搜尋條的顏色變化 
*/24
.search
4142
.search:hover
5051
.search-bar-on-selected
6869
style
>
7071
<
body
>
7273
<
header
>
74<
div 
class
="topbar"
>
75<
input 
class
="search"
type
="text"
value
=""/>
76div
>
77header
>
7879
body
>
8081
<
script
>
82var
search 
=document.getelementsbyclassname(
'search');
8384
//搜尋條選中和移除事件 修改class名稱的方法能更好的封裝**
85search[
0].addeventlistener(
'focus', 
function
())88
89search[
0].addeventlistener(
'blur', 
function
(e))
9394
script
>
9596
html
>

神奇的是，因為樣式的交錯，剛好讓hover標籤從一次性便成了用完後自動恢復至初態！！

嗯，在最後總結下，總結的東西不多，但是等到將來的某一天回頭望去，能夠看到過去各種奇奇怪怪的思維錨點：

1. input的聚焦監聽可以使用addeventlistener(focus, function(){}); 來實現。

2.很多事情都不需要去考慮，大多數情況做好自己的事情，自己所在意的東西就會迎刃而解。

3. 有時候，正是因為沒有答案，才會讓你踏出這一步，開始自己的新的旅程。

關於input的監聽聚焦事件

input事件監聽輸入法事件

Vue 回顧之指令（關於input自動聚焦的問題）

input 子系統五事件上報及監聽

關於input的監聽聚焦事件

input事件監聽輸入法事件

Vue 回顧之指令（關於input自動聚焦的問題）

input 子系統 五 事件上報及監聽

相關推薦

input 子系統五事件上報及監聽