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會有許多預設樣式和行為，這次開發遇到的有：

• 會預設下拉框顯示搜尋歷史記錄;
  

• 輸入時自動彈出「x」 「x」的樣式在不同手機上，樣式不同；
  

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

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

於是幾經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中文網！

🎜