移动端H5页面，通过点击软键盘搜索按钮实现搜索功能

快来打我* 2022-01-13 06:49 923阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWxvbmdfOTI3_size_16_color_FFFFFF_t_70][]

两种方案：

方案一：

// js如下：
        $(".search input").keypress(function(e){
            var key = $.trim($(this).val());
            if(e.keyCode === 13) {
                //  搜索工作
                that.search(key);
            }
        })

方案二：

**查了好多文章基本上都说的是监听keydown事件和判断键盘键值码，本人也试过那个适用于键而软键盘我没能用这个方法实现**

**我的的form的onsubmit方法实现的，也就是表单提交下边直接上代码，这部分是html代码**

**这部分是js代码**

**这样基本功能就实现了** 。**但是这样的话点击搜索按钮往往第一次页面会刷新一次，只有点击第二次才会出现想要的效果，所以我们还需要实现点击页面不刷新**

像这样加个iframe标签就可以了，将from的target对应到iframe的那么就是不会改变当前页面的链接，也就不刷新了

有许多时候我们点击搜索以后会出现比较长的列表，软键盘会盖住用户搜索的信息，我们点击一下屏幕才会使软键盘消失，这样用户体验也不是很好，所以我们可以在调用的方法中加一个软键盘收起的方法

好了这样一些基本的需求就可以实现了

完！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWxvbmdfOTI3_size_16_color_FFFFFF_t_70]: /images/20220113/3cfec542b9394383bafc715af454d7ee.png