服務(wù)項(xiàng)目:網(wǎng)站建設(shè)、仿站、程序開(kāi)發(fā)、APP開(kāi)發(fā)設(shè)計(jì)、移動(dòng)網(wǎng)站開(kāi)發(fā)設(shè)計(jì)、企業(yè)網(wǎng)站設(shè)計(jì)、電子商務(wù)網(wǎng)站開(kāi)發(fā)、網(wǎng)站維護(hù)、網(wǎng)站推廣、UX/UI 、HTML5、CSS3、JS / Jquery ...
四川浚??萍加邢薰?></a></div>
                    <div   id=四川???萍加邢薰? title=
四川浚??萍加邢薰?(開(kāi)發(fā)設(shè)計(jì)官網(wǎng))TEL : 15308000360 / QQ : 38585404

您的位置:首頁(yè) > 技術(shù)經(jīng)驗(yàn) > 前端開(kāi)發(fā) > 正文

簡(jiǎn)單HTML5打造內(nèi)涵搜索框
技術(shù)支持服務(wù)電話:15308000360 【7x24提供運(yùn)維服務(wù),解決各類系統(tǒng)/軟硬件疑難技術(shù)問(wèn)題】

隨著HTML5的深入人心,其越來(lái)越多的新功能為更多Coder所用,HTML5新增了不少人性化標(biāo)簽和屬性,馬上介紹的就是新的表單屬性。

實(shí)例圖片:

代碼如下:

很贊?Yes!

簡(jiǎn)短的幾個(gè)代碼就能實(shí)現(xiàn)原本多行JS才能實(shí)現(xiàn)的完美交互效果,這就是HTML5略窺一點(diǎn)的贊!

placeholder是為了設(shè)置初始值,并且這個(gè)初始值的顏色為灰色,當(dāng)input的內(nèi)容變動(dòng)時(shí),這個(gè)值就消失,它的職責(zé)就是給人一種親和力的指示,十分有愛(ài)。

autofocus,顧名思義:自動(dòng)聚焦,當(dāng)進(jìn)入當(dāng)前頁(yè)面時(shí),這個(gè)input會(huì)自動(dòng)獲取焦點(diǎn),而你可以在打開(kāi)頁(yè)面后直接輸入東西進(jìn)行搜索。當(dāng)autofocus出現(xiàn)兩次以上的時(shí)候,瀏覽器會(huì)選擇最后一個(gè)帶有autofocus屬性的input聚焦。

x-webkit-speech,這個(gè)大概不必多解釋了,webkit核的瀏覽器(如Chrome)特有的語(yǔ)音識(shí)別工具,給input裝上也是再好不過(guò)的了,話說(shuō)Google也給自己的搜索框裝上這個(gè)工具。

好了,不扯了,簡(jiǎn)單的一個(gè)小框框,其實(shí)有更多需要我們研究的東西。比如這個(gè)簡(jiǎn)單CSS3 讓搜索更有愛(ài)是我之前寫(xiě)的搜索框有愛(ài)體驗(yàn),簡(jiǎn)單即是美!



上一篇:推薦使用的版本號(hào)控制方式
下一篇:解決Button在IE6、7下的自適應(yīng)寬度問(wèn)題

相關(guān)熱詞搜索:html5 搜索框