天天看點

html5 type=text,在HTML5中輸入type =“text”vs input type =“search”

10 個答案:

答案 0 :(得分:160)

現在,他們之間并沒有太大的交易 - 也許永遠不會有。

但是,重點是讓浏覽器制造商能夠根據需要做一些特殊的事情。

在手機上考慮,打開數字鍵盤,或type="email"調出特殊版本的鍵盤,使用@和.com,其餘部分可用。

在手機上,搜尋可以調出一個内部搜尋小程式,如果他們想要的話。

另一方面,它可以幫助目前的開發人員使用css。

input[type=search]:after { content : url("magnifying-glass.gif"); }

答案 1 :(得分:28)

在大多數浏覽器中它絕對沒有。它隻是表現得像

文字輸入。這不是問題。規範并不要求它這樣做

什麼特别的。 WebKit浏覽器确實對它有所不同

但是,主要是造型。

預設情況下,WebKit中的搜尋輸入具有嵌入邊框,四舍五入

角落和嚴格的排版控制。

此外,

這在我所知道的任何地方都沒有記錄,也沒有在規範中記錄,

但是如果在輸入上添加結果參數,則會應用WebKit

一個小放大鏡,下拉箭頭顯示前一個

結果

最重要的是,它為input type提供了語義含義。

更新強>

答案 2 :(得分:16)

視覺/功能上,如果輸入類型為“搜尋”,則會有2個差異: -

您會在輸入/搜尋框的末尾顯示“X”符号,以清除方框中的文字

按鍵盤上的“Esc”鍵也會清除文字

醇>

答案 3 :(得分:6)

在某些浏覽器上,它還支援“結果”和“自動儲存”屬性,這些屬性通過放大鏡圖示提供自動“最近搜尋”功能。

答案 4 :(得分:2)

實際上要非常小心,假設它什麼都不做。當您使用類型搜尋轉到樣式輸入時,它們具有某些無法更改的屬性。嘗試更改一個邊框,你會發現它是不可能的。還有其他一些不允許的CSS屬性,請檢視this以擷取所有詳細資訊。

同樣如Jashwant所提到的那樣,結果屬性雖然不起作用,除非你還包括自動儲存屬性。但是,下拉清單在大多數浏覽器中都不起作用,是以請自擔風險。

答案 5 :(得分:1)

加分點:input type="search“能夠使用onsearch屬性(雖然我注意到這在微軟新的Edge浏覽器中不起作用),這樣就無需編寫自定義{{ 1}}事情。

答案 6 :(得分:1)

使用input type =“search”使keybord enterkey的文本顯示“搜尋”,這可以改善使用者體驗。但是,如果使用此類型,則必須調整樣式。

答案 7 :(得分:1)

操作中存在浏覽器差異,當您鍵入一些單詞然後在chrome / safari中的輸入type="search"中鍵入ESC時,輸入框将被清除。但在type="text"場景中,這些詞語不會被清除。是以,請謹慎選擇類型,尤其是當您将其用于自動完成或搜尋相關功能時

答案 8 :(得分:0)

這取決于程式員的觀點,程式員可以通過檢視類型輕松确定輸入的目的,并且CSS樣式很容易,JavaScript或JQuery也可以在輸入中驗證規則。

答案 9 :(得分:-1)

但是如果你設定了,它會對你的輸入元素産生不良影響

在你的CSS中你設定了

input {background: url("images/search_bg.gif");}

它根本不會出現。