手机软键盘搜索按钮实现点击搜索功能
2017-07-17 17:46
253 查看
手机软键盘实现搜索功能
最近一个移动端的项目需要实现点击手机软键盘的搜索键实现点击页面搜索按钮相同的功能,虽然功能挺小但是度娘了不短的时间才达到需求,下边我就大概的说一下实现思路希望对大家有所帮助功能需求
点击软键盘实现点击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();//软键盘收起 }
好了这样一些基本的需求就可以实现了,希望对大家有所帮助,如果有不足之处也希望大家多多留言指教。
这只是一个比较基础的功能,像多个input提交或者更加繁琐的功能还需进一步研究
大家可以访问我的博客,里边会分享一些比较基础的it只是,有什么需要可以留言,也可以互相友联
相关文章推荐
- python实现手机通讯录搜索功能
- Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现
- Android 类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现
- Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现
- Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现
- EditText在手机弹出的软键盘中,将回车键变为搜索键和点击搜索键时,执行2次搜索解决
- 调起手机软键盘点击搜索按键后触发搜索功能
- 手机中点击网页链接实现拨号或保存电话功能实现代码
- input 点击放大镜背景搜索、jQuery实现简单前端搜索功能
- 在C#中实现对ListView点击列标题自动排序功能
- Android手机实现GPS语音导航功能(Google地图导航)
- Android流式布局实现历史搜索记录功能
- VB.NET+AJAX搜索建议功能的实现
- Yii框架结合sphinx,Ajax实现搜索分页功能示例
- java调接口实现发送手机短信验证码功能,手机验证码,接口调用
- java简单的实现搜索框的下拉显示相关搜索功能
- 通过SQLite实现搜索功能
- jquery easyui实现树形(Tree)菜单点击,在content页生成Tab功能
- 详解DevExpress.LookUpEdit控件实现自动搜索定位功能