成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

e10101 / 1275人閱讀

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

背景

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

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

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

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

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

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

2、避開 outline，選擇 border

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

3、如何讓任何一個元素都能 focusable

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

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

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

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

哪些元素是 focusable的？

搜索結(jié)果：

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

雖然規(guī)范這么定義，但瀏覽器在實現(xiàn)時卻是另外一套。瀏覽器給任何一個 HTMLElement 都定義focus()方法，但并不是任何一個HTMLElement 都能獲得焦點（獲得焦點術(shù)語叫 active, 具體請參考：http://help.dottoro.com/ljqmdirr.php）。一般來說，任何一個時刻HTML 文檔中只會有一個active元素，但并不是任何一個元素都能成為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)頁面窗口從隱藏變成前置可見時，focus 事件就會觸發(fā)

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111188.html

相關(guān)文章

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

    摘要：背景之前做了一個網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計為獲得鼠標(biāo)焦點時外邊框不變藍(lán)。而且輸入框的邊框設(shè)置在了父元素上，所有當(dāng)輸入框獲得焦點時，看到的應(yīng)該是父元素上的邊框變藍(lán)，而不是里面的的邊框變藍(lán)。 背景 之前做了一個網(wǎng)頁，網(wǎng)頁中的所有輸入框都被設(shè)計為獲得鼠標(biāo)焦點時外邊框不變藍(lán)。突然某一天，產(chǎn)品覺得這樣用戶體驗不好，不能很明顯地告訴用戶當(dāng)前鼠標(biāo)停在哪里，于是要求改為當(dāng)輸入框獲得鼠標(biāo)焦點時，外...

    Coding01 評論0 收藏0

  • 前端頁面總結(jié)

    摘要：定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。它的行為就像而當(dāng)頁面滾動超出目標(biāo)區(qū)域時，它的表現(xiàn)就像，它會固定在目標(biāo)位置。此元素會被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。以下內(nèi)容部分轉(zhuǎn)載自菜鳥教程CSS層疊樣式表(CascadingStyleSheets)內(nèi)聯(lián)：內(nèi)嵌：外部樣式文件：[object Object]rel 屬性，規(guī)定當(dāng)前文檔與被鏈接文檔/資源之間的關(guān)系。優(yōu)先級：內(nèi)聯(lián)>內(nèi)嵌>...

    番茄西紅柿 評論0 收藏0

  • selenium動態(tài)數(shù)據(jù)獲取的方法實現(xiàn)

    　　這篇文章主要是闡述了selenium可視化數(shù)據(jù)抓取有效的方法實現(xiàn)，文中根據(jù)舉例編碼講到的十分詳盡，對大家學(xué)習(xí)培訓(xùn)還是工作具有很強的參照學(xué)習(xí)培訓(xùn)使用價值，需求的小伙伴們下邊伴隨著小編就來互相學(xué)習(xí)了解一下吧?！　elenium是一個自動化技術(shù)檢測工具，運用它能夠推動電腦瀏覽器實行特殊動作，如鼠標(biāo)點擊、下拉框等操作，同時也可以獲取電腦瀏覽器現(xiàn)階段獲得界面的程序代碼，保證由此可見即可獲得。對于有些J...

    89542767 評論0 收藏0

  • pythonGUI多列輸入文本Text的完成

    　　此篇文章主要是詳細(xì)介紹了pythonGUI多列輸入文本Text的控制方式，具有非常好的實用價值，希望能幫助到大家。如有誤或者未考慮到真正的地區(qū)，望鼎力相助　　Text的屬性wrap　　fromtkinterimport* 　　root=Tk() 　　root.geometry('200x300') 　　te=Text(root,height=20,width=15) 　　#將多...

    89542767 評論0 收藏0

  • pythonGUI多做輸入文本Text的完成

    　　文章主要是詳細(xì)介紹了pythonGUI多做輸入文本Text的控制方式，具有非常好的實用價值，希望能幫助到大家。如有誤或者未考慮到真正的地區(qū)，望鼎力相助　　Text的屬性wrap　　fromtkinterimport* 　　root=Tk() 　　root.geometry('200x300') 　　te=Text(root,height=20,width=15) 　　#將多做輸...

    89542767 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<