手机端实现软键盘搜索

Posted sincere-x

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手机端实现软键盘搜索相关的知识,希望对你有一定的参考价值。

手机软键盘实现搜索功能

功能需求

技术分享图片

点击软键盘实现点击go一样的搜索功能

功能实现

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

我的的form的onsubmit方法实现的,也就是表单提交下边直接上代码

这部分是html代码

<html>
<form target="#" id="search_from"> 
    <input class="search_in" type="search" placeholder="请输入关键词" />
</form>

这部分是js代码

<script>
document.getElementById(‘search_from‘).onsubmit = function(){
    alert("123");
    yourfun();
}
</script>

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

<form target="frameFile" id="search_from"> 
    <input class="search_in" type="search" placeholder="请输入关键词" />
    <iframe name=‘frameFile‘ style="display: none;"></iframe>
</form>

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

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

<script>
document.getElementById(‘search_from‘).onsubmit = function(e){
    yourfun();
    document.activeElement.blur();//软键盘收起
}
</script>

好了这样一些基本的需求就可以实现了,希望对大家有所帮助,如果有不足之处也希望大家多多留言指教。

这只是一个比较基础的功能,像多个input提交或者更加繁琐的功能还需进一步研究




以上是关于手机端实现软键盘搜索的主要内容,如果未能解决你的问题,请参考以下文章

JS移动端如何监听软键盘回车事件

手机怎么调出软键盘

开发移动端web应用, 使用手机自带键盘的搜索按钮

H5防止安卓手机软键盘弹出挤压页面导致变形的方法

移动端 vue 点击软键盘的回车键(前往或搜索)进行搜索

按下返回键时隐藏软键盘