手机软键盘搜索按钮实现点击搜索功能
来源:互联网 发布:苹果换铃声软件 编辑:程序博客网 时间:2024/06/05 04:27
手机软键盘实现搜索功能
最近一个移动端的项目需要实现点击手机软键盘的搜索键实现点击页面搜索按钮相同的功能,虽然功能挺小但是度娘了不短的时间才达到需求,下边我就大概的说一下实现思路希望对大家有所帮助
功能需求
点击软键盘实现点击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提交或者更加繁琐的功能还需进一步研究
阅读全文
1 0
- 手机软键盘搜索按钮实现点击搜索功能
- 让手机软键盘出现“搜索”按钮
- android在点击搜索按钮同时关闭软键盘
- EditText点击的时候软键盘上出现搜索按钮
- EditText点击的时候软键盘上出现搜索按钮
- 软键盘搜索按钮绑定使用
- android 监控软键盘确定 搜索 按钮并赋予点击事件
- Android手机软键盘enter改为搜索
- 设置软键盘搜索键以及监听搜索键点击
- 【手机UI】搜索输入框,呼出软键盘时右下角为搜索按钮,并使用js发送请求
- 模仿手机浏览器,点击Edittext,同时出现搜索历史和软键盘
- Android 将软键盘的回车按钮改变成搜索按钮
- 将软键盘的回车按钮变为搜索按钮
- 将软键盘的回车按钮变为搜索按钮
- EditText在手机弹出的软键盘中,将回车键变为搜索键和点击搜索键时,执行2次搜索解决
- 调起手机软键盘点击搜索按键后触发搜索功能
- Android 类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现
- Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现
- [POJ2241]最高巴比伦塔
- centos7、unbutu14安装rabbitmq
- 自己手写的一个关于中英文切换时间的工具类
- 10 SQL optimization
- DTcms(四)
- 手机软键盘搜索按钮实现点击搜索功能
- struts原理(手写原理)
- Educational Codeforces Round 25 B. Five-In-a-Row
- android 复习和NOde JS 学习篇 模拟登陆,文件上传Demo
- Ubuntu16.04下为pycharm设置快速启动项
- 通过RTMP play分析FLV格式详解
- 编程实现统计某年某月份的天数。
- microsoft server 2014安装配置
- 支持向量机SVM基本理论