input type="search" 實(shí)現(xiàn)搜索框

e10101 發(fā)布于2019-08-01 16:04 / 4130人閱讀

摘要：欲實(shí)現(xiàn)一個(gè)文字搜索的功能，要求輸入時(shí)，鍵盤回車按鈕提示顯示為搜索。于是幾經(jīng)，得到答案設(shè)置去掉彈出的下拉框?qū)⒛J(rèn)的隱藏掉針對設(shè)置樣式去除下橢圓形同時(shí)別忘記，如果提交搜索時(shí)想使用，那么可以阻止表單的默認(rèn)行為

欲實(shí)現(xiàn)一個(gè)文字搜索的功能，要求輸入時(shí)，鍵盤回車按鈕提示顯示為“搜索”。效果如下:

開始~

input type=text并不能達(dá)到這種效果，google了一下，html5 增加的type=search可以做到（但需要input type=search外面包上一層帶action屬性的form）。

但type=search會(huì)有許多默認(rèn)樣式和行為，這次開發(fā)遇到的有：

會(huì)默認(rèn)下拉框顯示搜索歷史記錄;

輸入時(shí)自動(dòng)彈出“x”，“x”的樣式在不同手機(jī)上，樣式不同；

IOS 手機(jī)（測試時(shí)為iphone6 ios10）上輸入框?yàn)闄E圓形.

但我們希望樣式按照我們自定義的樣式顯示，并且各個(gè)手機(jī)上能統(tǒng)一。

于是幾經(jīng)google，得到答案：

設(shè)置input autocomplete="off"去掉彈出的下拉框；

將默認(rèn)的“x”隱藏掉：

input[type="search"]::-webkit-search-cancel-button{
    display: none;
}

針對ios 設(shè)置樣式, 去除ios下input 橢圓形:

    -webkit-appearance: none;

同時(shí)別忘記，如果提交搜索時(shí)想使用ajax，那么可以阻止表單的默認(rèn)行為：

container.on("submit", ".input-kw-form", function(event){
    event.preventDefault();
})

云服務(wù)器 GPU云服務(wù)器 Quote quoted quot python b&quot&quot

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

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

相關(guān)文章

有關(guān)表單autocomplete = &quot;off&quot; 失效問題解決方案

摘要：一介紹是中的新屬性。自動(dòng)完成允許瀏覽器預(yù)測對字段的輸入。以及該屬性有兩個(gè)值，和。是規(guī)定禁用自動(dòng)完成功能。二有關(guān)失效做項(xiàng)目的時(shí)候，有這個(gè)固然方便。但是當(dāng)是的時(shí)候，發(fā)現(xiàn)并沒有起作用。我使用的是這種方法解決的。讓文本框消失，密碼框顯示。一、autocomplete介紹 autocomplete是Html5中的新屬性。該屬性規(guī)定輸入字段是否應(yīng)該啟用自動(dòng)完成功能。自動(dòng)完成允許瀏覽器預(yù)測對字段的...

skinner 2019-08-23 10:34 評論0 收藏0
使用Django詳細(xì)講解圖書管理系統(tǒng)的實(shí)現(xiàn)步驟

　　Diango也是由python進(jìn)行編寫的，它的應(yīng)用范圍也是比較的廣泛的，可以用來進(jìn)行編譯各種管理系統(tǒng)。那么，怎么使用Django去編寫圖書管理系統(tǒng)呢？為了解答各位讀者的困惑，下面小編就給大家一步一步的列出了詳細(xì)的步驟?！　№?xiàng)目使用python開發(fā)，采用Django框架，數(shù)據(jù)庫采用MySQL，根據(jù)用戶人員的不同分成兩套系統(tǒng)，分別是學(xué)生系統(tǒng)和管理員系統(tǒng)，功能模塊具體分成四個(gè)，分別是用戶管理模塊、圖...

89542767 2022-11-13 15:07 評論0 收藏0
用Vue3管理后臺(tái)項(xiàng)目實(shí)現(xiàn)高德地圖的選點(diǎn)

　　現(xiàn)在客戶來了一個(gè)項(xiàng)目簡況：有一個(gè)業(yè)務(wù)場景是添加門店的地址和經(jīng)緯度，地址可以輸入，參考用經(jīng)緯度當(dāng)然不行，目前有最好方式就是讓用戶在地圖上搜索或者直接點(diǎn)擊獲取點(diǎn)的經(jīng)緯度等詳細(xì)信息?，F(xiàn)在我們就看具體的內(nèi)容。　　登錄高德開放平臺(tái)　　創(chuàng)建應(yīng)用，添加Key，選擇Web端(JS API)，生成Key和安全密鑰　　引入地圖 JSAPI　　項(xiàng)目中使用了官方推薦的 JSAPILoader 來加載地圖　　安裝官方 ...

3403771864 2022-10-26 22:57 評論0 收藏0
實(shí)現(xiàn)&quot;輸入框&quot;獲得焦點(diǎn)時(shí)外邊框變藍(lán)

摘要：背景之前做了一個(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í)，外...

Coding01 2019-08-21 10:44 評論0 收藏0