自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

簡單HTML 5打造內(nèi)涵搜索框

開發(fā) 前端
placeholder是為了設置初始值,并且這個初始值的顏色為灰色,當input的內(nèi)容變動時,這個值就消失,它的職責就是給人一種親和力的指示,十分有愛。

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

實例圖片:

代碼如下:

  1. <input type="text" placeholder="輸入 回車搜索" autofocus x-webkit-speech> 

很贊?Yes!

簡短的幾個代碼就能實現(xiàn)原本多行JS才能實現(xiàn)的***交互效果,這就是HTML5略窺一點的贊!

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

autofocus,顧名思義:自動聚焦,當進入當前頁面時,這個input會自動獲取焦點,而你可以在打開頁面后直接輸入東西進行搜索。當autofocus出現(xiàn)兩次以上的時候,瀏覽器會選擇***一個帶有autofocus屬性的input聚焦。

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

好了,不扯了,簡單的一個小框框,其實有更多需要我們研究的東西。比如這個簡單CSS3 讓搜索更有愛是我之前寫的搜索框有愛體驗,簡單即是美!

原文鏈接:http://www.daqianduan.com/html5-search-input/#13688-tsina-1-59987-57d4d90508c08d162896a47818ce968b

【編輯推薦】

責任編輯:張偉 來源: 大前端
相關推薦

2012-05-21 09:31:56

HTML5

2011-11-21 14:21:56

HTML 5

2011-06-27 09:47:37

HTML 5

2009-12-24 10:55:08

2011-06-24 13:58:06

CSS3HTML5

2021-11-18 11:52:49

HTML5小游戲JS

2009-10-26 15:36:56

Windows Emb

2010-09-29 17:59:55

酷睿i3迷你PC

2023-03-08 17:33:36

KubernetesJava

2010-05-21 13:27:02

2014-06-25 18:39:16

2013-04-03 14:38:48

青島海關Windows Ser

2017-12-05 14:22:25

新華三

2009-11-19 08:54:20

Windows 7系統(tǒng)生態(tài)鏈

2011-06-24 14:53:13

寶通至強E3

2013-04-10 13:21:21

浙大網(wǎng)新Windows 8微軟

2013-03-27 10:20:33

微軟Windows Ser青島海關

2012-09-13 09:48:59

微軟

2023-02-13 13:45:57

GitHub搜素

2020-09-22 16:56:40

F5多云安全
點贊
收藏

51CTO技術棧公眾號