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

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

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

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

開始~

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

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

會默認下拉框顯示搜索歷史記錄;

輸入時自動彈出“x”，“x”的樣式在不同手機上，樣式不同；

IOS 手機（測試時為iphone6 ios10）上輸入框為橢圓形.

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

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

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

將默認的“x”隱藏掉：

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

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

    -webkit-appearance: none;

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

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

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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