前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用mui搜索框触发手机软键盘搜索按钮事件

使用mui搜索框触发手机软键盘搜索按钮事件

作者头像
素描
发布2019-09-19 10:33:52
1.7K0
发布2019-09-19 10:33:52
举报
文章被收录于专栏:编程录编程录

  1. 要虚拟键盘显示“搜索”二字,需满足以下两个条件:
  2. (1)设置input属性 type=‘search’
  3. (2)input需在form表单中
代码语言:javascript
复制
<!--html-->
<form action="">
    <div class="mui-input-row mui-search">
        <input id="search" type="search" class="mui-input-clear" placeholder="输入关键字搜索">
    </div>
</form>

  1. 若是实现点击"搜索",实现搜索事件,需要对按键进行监听。注意要点:
  2. (1)监听事件类型“keypress”
  3. (2)event.keyCode == "13"
  4. (3)event.preventDefault(); // 阻止默认事件---阻止页面刷新(表单提交)
代码语言:javascript
复制
document.getElementById("search").addEventListener("keypress",function(event) {
    if(event.keyCode == "13") {
        document.activeElement.blur();//收起虚拟键盘
        toSearch();//TODO 完成搜索事件
        event.preventDefault(); // 阻止默认事件---阻止页面刷新
    }
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档