input type="search" 實現搜索框

e10101 發布于2019-08-01 16:04 / 4107人閱讀

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

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

開始~

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

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

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

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

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

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

于是幾經google，得到答案：

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

將默認的“x”隱藏掉：

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

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

    -webkit-appearance: none;

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

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

云服務器 GPU云服務器 Quote quoted quot python b&quot&quot

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50276.html

有關表單autocomplete = &quot;off&quot; 失效問題解決方案

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

skinner 2019-08-23 10:34 評論0 收藏0
使用Django詳細講解圖書管理系統的實現步驟

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

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

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

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

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

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