首頁 > web前端 > html教學 > input type='search' 實作搜尋框

input type='search' 實作搜尋框

高洛峰
發布: 2017-02-15 13:56:12
原創
4975 人瀏覽過

欲實現一個文字搜尋的功能,要求輸入時,鍵盤回車按鈕提示顯示為「搜尋」。效果如下:
input type="search" 实现搜索框

開始~

input type=text並不能達到這種效果,google了一下,html5 增加的type=search可以做到(但需要input type=search外麵包上一層帶action屬性的form)。

        <p class="search-input-wrap clearfix">
            <p class="form-input-wrap f-l">
                <form action="" class="input-kw-form">
                    <input type="search" autocomplete="off" name="baike-search" placeholder="请输入关键词" class="input-kw">
                </form>
                <i class="iconfont if-message"></i>
                <i class="iconfont if-close"></i>
            </p>
            <i class="search-cancel f-l">取消</i>
        </p>
登入後複製

但type=search會有許多預設樣式和行為,這次開發遇到的有:

  • 會預設下拉框顯示搜尋歷史記錄;
    input type="search" 实现搜索框

  • 輸入時自動彈出「x」 「x」的樣式在不同手機上,樣式不同;
    input type="search" 实现搜索框

  • IOS 手機(測試時為iphone6 ios10)上輸入框為橢圓形.
    input type="search" 实现搜索框

但我們希望樣式按照我們定義的樣式但我們希望樣式按照我們定義的樣式但我們希望樣式根據我們定義的樣式但我們希望樣式樣式顯示,且各手機上能統一。

於是幾經google,得到答案:

  • 設定input autocomplete="off"去掉彈出的下拉框;

  • 將預設的「x」隱藏掉:針對

    將預設的「x」隱藏掉:針對
  • , 去除ios下input 橢圓形:

input[type="search"]::-webkit-search-cancel-button{
    display: none;
}
登入後複製
同時別忘記,如果提交搜尋時想使用ajax,那麼可以阻止表單的預設行為:

    -webkit-appearance: none;
登入後複製
更多input type="search" 實現搜尋框相關文章請關注PHP中文網!


🎜
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板