html5 里面的type=”search“ ,h5版，点击手机键盘上的 ‘搜索”，”前往“等按钮，进行搜索

深碍√TFBOYSˉ_ 2023-06-07 03:17 1阅读 0赞

### 效果图： ###

使用type=”search " 会得到如下的效果。

**（PC端的效果）：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

**（手机端的效果）：点击”搜索“的时候，可以进行查询。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1][]

去掉type=”search“ 默认带的x号：

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

敲手机上的  ”回车“，”搜索“等搜索按钮的时候，会触发搜索。

searchInputConHandler: function() {
        that = this;
        console.log('文本输入框被触发了');
        var keycode = event.keyCode;
        //获取搜索框的值
        var searchContent = that.searchContext;
            if (keycode == '13') {
                event.preventDefault();
                if (searchContent == '') {
                    console.log('请输入搜索内容');
                } else {
                    that.toSearch();
                }
            }
    }

\-------完。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: /images/20230601/f739a940512a4365be74a167b7097ee4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/30171557a93a433ba89122655d703941.png