實(shí)現(xiàn)"輸入框"獲得焦點(diǎn)時(shí)外邊框變藍(lán)

e10101 發(fā)布于2019-08-28 18:21 / 1262人閱讀

摘要：背景之前做了一個(gè)網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框不變藍(lán)。而且輸入框的邊框設(shè)置在了父元素上，所有當(dāng)輸入框獲得焦點(diǎn)時(shí)，看到的應(yīng)該是父元素上的邊框變藍(lán)，而不是里面的的邊框變藍(lán)。

背景

之前做了一個(gè)網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計(jì)為“獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框不變藍(lán)”。突然某一天，產(chǎn)品覺得這樣用戶體驗(yàn)不好，不能很明顯地告訴用戶當(dāng)前鼠標(biāo)停在哪里，于是要求改為“當(dāng)輸入框獲得鼠標(biāo)焦點(diǎn)時(shí)，外邊框自動(dòng)變藍(lán)；失去焦點(diǎn)時(shí)外邊框恢復(fù)原樣”。

瀏覽器自動(dòng)會(huì)給輸入框input、textarea的outline 屬性設(shè)置一個(gè)默認(rèn)值，效果就是當(dāng)輸入框獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框會(huì)自動(dòng)帶上顏色，失去焦點(diǎn)時(shí)外邊框顏色消失。由于不同瀏覽器outline 屬性的默認(rèn)值不同，導(dǎo)致外邊框的顏色也不同。如果不想要瀏覽器的outline默認(rèn)設(shè)置，只需要將 outline 屬性設(shè)置為none 即可。

所以一開始聽到這個(gè)需求，感覺特別簡(jiǎn)單，不就是純 CSS 的問題嘛！我只要將所有輸入框的 outline 屬性設(shè)置為瀏覽器默認(rèn)的值就好了，但我想的太天真了。。。。

1、如何復(fù)制瀏覽器默認(rèn)的 outline 樣式

由于網(wǎng)頁中已有的輸入框的樣式遍布在各個(gè)文件中，有一種非常機(jī)械的辦法，那就是到每個(gè)文件中去刪除掉輸入框的 outline：none樣式，這樣輸入框就會(huì)使用瀏覽器默認(rèn)的 outline 樣式了。但是這樣做要改的地方太多了，會(huì)瘋掉的！再想想有沒有更省事的方法，有了！在最基本的base.css樣式文件中給輸入框添加一個(gè)focus時(shí)候的outline樣式不就解決了么。那么問題來了，該將outline 設(shè)置何值，才能自動(dòng)使用瀏覽器默認(rèn)的outline樣式呢？

我第一個(gè)想到的方法是將 outline設(shè)置為auto，但發(fā)現(xiàn)只有webkit 內(nèi)核的瀏覽器才支持這個(gè)屬性值，firefox 不支持，因?yàn)?b>auto 并不是標(biāo)準(zhǔn)的outline 值。所以要想直接復(fù)制瀏覽器默認(rèn)的outline樣式是做不到的。難道我要針對(duì)每個(gè)瀏覽器設(shè)置不同的outline 值，為了這么一點(diǎn)破需求費(fèi)那么大工夫？！算了，省事點(diǎn)的方式還是直接摒棄瀏覽器的默認(rèn)outline樣式，統(tǒng)一將outline設(shè)置為一種樣式好了。

2、避開 outline，選擇 border

但我發(fā)現(xiàn)了新問題，通過設(shè)置outline樣式為輸入框添加外邊框，效果并不好。因?yàn)?outline 沒有類似 border-radius的屬性來改變邊角的弧度。這樣就導(dǎo)致了一個(gè)問題：當(dāng)輸入框設(shè)置了border顏色，同時(shí)border-radius為3px以上時(shí)，能明顯的看到outline 外邊框并沒有和border 重合。看來設(shè)置 outline 來達(dá)到邊框變藍(lán)效果并不是最好的選擇，為什么不選用設(shè)置 border 來達(dá)到同樣的效果呢？只要將border再設(shè)置下 border-shadow,那么看起來也是和outline效果一樣的，而且border還能設(shè)置border-radius，顯示效果更滿足需求。

3、如何讓任何一個(gè)元素都能 focusable

通過設(shè)置 border 解決了大多數(shù)輸入框，但發(fā)現(xiàn)又有了新問題。

網(wǎng)頁中有些輸入框其實(shí)并不是單一使用 input/textarea來實(shí)現(xiàn)的，這類“輸入框”看起來和一般輸入框并無兩樣，但其實(shí) HTML 結(jié)構(gòu)是一個(gè) div 里面包含著一個(gè) input/textarea 來實(shí)現(xiàn)的。而且輸入框的邊框設(shè)置在了父元素 div 上，所有當(dāng)輸入框獲得焦點(diǎn)時(shí)，看到的應(yīng)該是父元素 div 上的邊框變藍(lán)，而不是里面的input/textarea 的邊框變藍(lán)。

要想獲得焦點(diǎn)時(shí)父元素 div的邊框變藍(lán)，肯定可行的方法是通過 JS 來實(shí)現(xiàn)：給input/textarea 綁定一個(gè) focus 和一個(gè)blur事件，在focus 事件處理函數(shù)中將父元素div的邊框置藍(lán)，在blur事件處理函數(shù)中將父元素div的邊框恢復(fù)原樣。這種方法時(shí)絕對(duì)可行的，但是我總覺得應(yīng)該有更簡(jiǎn)單的，純粹使用 css 實(shí)現(xiàn)的方法。

如果想單純通過css 實(shí)現(xiàn)，首先想到的是用選擇器div:focus。但是發(fā)現(xiàn)div上無法使用:focus偽類。于是我就猜想：可能并不是所有的元素都是 focusable的，那么得找一份說明哪些元素 focusable的規(guī)范。

哪些元素是 focusable的？

搜索結(jié)果：

根據(jù) DOM Level 2 HTML規(guī)范，focusable 的DOM元素都會(huì)有一個(gè)原生的focus()方法，只有 focusable 的DOM 元素才有 focus 事件，才能使用:focus偽類。擁有原生的focus()方法的DOM元素包括幾種：HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement and HTMLAnchorElement。很明顯，規(guī)范中遺漏了HTMLButtonElement and HTMLAreaElement。

雖然規(guī)范這么定義，但瀏覽器在實(shí)現(xiàn)時(shí)卻是另外一套。瀏覽器給任何一個(gè) HTMLElement 都定義focus()方法，但并不是任何一個(gè)HTMLElement 都能獲得焦點(diǎn)（獲得焦點(diǎn)術(shù)語叫 active, 具體請(qǐng)參考：http://help.dottoro.com/ljqmdirr.php）。一般來說，任何一個(gè)時(shí)刻HTML 文檔中只會(huì)有一個(gè)active元素，但并不是任何一個(gè)元素都能成為active元素。能成為active 的元素包括：

表單元素(form controllers)：input/option/textarea/button

鏈接元素(links)：a標(biāo)簽、area標(biāo)簽（必須要帶 href 屬性，包括 href 屬性為空）

可以被編輯的元素（包括通過添加 contenteditable = "true"屬性變成可編輯的情況）

設(shè)置了 tabindex 屬性（tabindex 值非-1）的元素

window：當(dāng)頁面窗口從隱藏變成前置可見時(shí)，focus 事件就會(huì)觸發(fā)

根據(jù)搜索結(jié)果，要想將父元素div變成focusable，只需要在元素上設(shè)置 tabindex 屬性，然后通過:focus偽類設(shè)置父元素div 獲得焦點(diǎn)時(shí)的border樣式。但我發(fā)現(xiàn)當(dāng)鼠標(biāo)點(diǎn)擊里面的 input 元素時(shí)，父元素div并沒有獲得焦點(diǎn)，獲得焦點(diǎn)的是子元素input。

所以最后還是沒能通過純 css 的方法來解決這個(gè)問題，無奈之下我還是通過js去解決了。。。。。。