Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >使用mui搜索框触发手机软键盘搜索按钮事件

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

作者头像
素描
发布于 2019-09-19 02:33:52
发布于 2019-09-19 02:33:52
1.9K00
代码可运行
举报
文章被收录于专栏:编程录编程录
运行总次数:0
代码可运行

  1. 要虚拟键盘显示“搜索”二字,需满足以下两个条件:
  2. (1)设置input属性 type=‘search’
  3. (2)input需在form表单中
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!--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
代码运行次数:0
运行
AI代码解释
复制
document.getElementById("search").addEventListener("keypress",function(event) {
    if(event.keyCode == "13") {
        document.activeElement.blur();//收起虚拟键盘
        toSearch();//TODO 完成搜索事件
        event.preventDefault(); // 阻止默认事件---阻止页面刷新
    }
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
vue 实现移动端键盘搜索事件监听
这些事件是当一个对象具有焦点时按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的。(要解释 ANSI 字符,应使用 KeyPress 事件。)
用户1289394
2021/10/13
1.8K0
JQ事件和事件对象
  //mouseover()/mouseout()和mouseenter()/mouseleave()的区别
用户3159471
2018/09/13
4.4K0
JavaScript 各种事件触发总结
鼠标 Click: 鼠标在一个对象上左键点击触发Click事件,对象包括button,document,checkbox,link,radio,submit.
王瑞MVP
2022/12/28
4.1K0
mint-ui的search组件如何在键盘显示搜索按钮
<form action="" target="frameFile"> <mt-search v-model="value" placeholder="请输入关键字" @keyup.native.enter="search(value)"> <div v-infinite-scroll="loadMore()" infinite-scroll-disabled="loading" infinite-scroll-distance="10"> <ListItem :lists="li
蓓蕾心晴
2018/04/12
1.9K0
事件
JavaScript与HTML之间的交互式通过事件实现的。 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码。
奋飛
2019/08/15
3.4K0
【Java 进阶篇】HTML DOM 事件详解
当用户在网页上点击按钮、输入文本、鼠标移动到某个区域或执行其他互动操作时,这些动作都可以触发事件。HTML DOM(文档对象模型)允许我们使用JavaScript来捕获、处理和响应这些事件,以实现网页的交互和动态性。本篇博客将围绕HTML DOM事件展开详细的解释,包括事件的类型、事件处理程序、事件对象和示例代码。让我们一起来深入了解吧。
繁依Fanyi
2023/10/22
4680
【Java 进阶篇】HTML DOM 事件详解
可能这些是你想要的H5软键盘兼容方案
最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上。需求很明确,看似很简单,其实不然。从实验过一些机型上看,发现主要存在以下问题:
桃翁
2019/06/20
8.3K1
可能这些是你想要的H5软键盘兼容方案
默认行为及阻止
<a>标签在href存在的情况下会点击自动跳转链接或者定位锚点,通过对<a>的监听事件阻止默认行为后,点击链接不会跳转。
WindRunnerMax
2020/08/27
1.8K0
前端-part10-jQuery操作样式三:函数+事件委托+阻止冒泡+鼠标事件+输入框监听
1.jQurey的 .each() 循环方法的使用 //一般方法示例1 for (var i=0;i<$("div").length;i++){ // 定位到所有的 div 标签并遍历其下标 console.log($("div")[i]); // 依次打印出标签 } //jQUery的 .each() 方法示例1 $("div").each(function(){ console.log(this); }) =========================================
少年包青菜
2019/08/28
2.6K0
表单文本框的使用(二) 输入过滤(合成事件)
输入框本身是没有这个功能的,但是我们可以通过JavaScript来实现。 我们能实现向输入框中输入字符,依靠的是键盘事件,所以可以通过添加键盘事件,然后根据事件对象的信息来判断符不符合条件,不符合条件,就通过event.preventDefault阻止默认事件,即阻止输入。
赤蓝紫
2023/03/16
1.6K0
表单文本框的使用(二) 输入过滤(合成事件)
【Web前端】系统中正在发生的“事件”
事件是在你编写的程序中发生的特定行为,系统会传递这些事件的信息,以便你的代码能够做出相应的反应。举个例子,当用户在网页上点击一个按钮时,你可能希望通过弹出一个信息框来回应这一操作。
一条晒干的咸鱼
2024/11/19
2490
【Web前端】系统中正在发生的“事件”
Vue.js-事件处理器 原
方法事件处理器 许多事件处理的逻辑都很复杂,所以直接把JavaScript代码写在v-on指令中是不可行的,因此v-on可以接收一个定义的方法来调用
tianyawhl
2019/04/04
9530
十四.Vue事件处理
十四.Vue事件处理
Java架构师必看
2021/05/14
1.8K0
十四.Vue事件处理
JavaScript 实现阻碍调试
实现全屏爆炸:这段代码很简单,当按下调试键的时候,全屏都是乱码,所有标签里都会填充为乱码,轻则直接可以让浏览器崩溃,经测试有些系统则可能会蓝屏!(慎用)
王瑞MVP
2022/12/28
6330
v-on绑定的一系列事件修饰符
官方文档看-->https://cn.vuejs.org/v2/guide/events.html
名字是乱打的
2021/12/22
2.3K0
第53天:鼠标事件、event事件对象
-->鼠标事件 -->event事件对象 -->默认事件 -->键盘事件(keyCode) -->拖拽效果
半指温柔乐
2018/09/11
1K0
Event(事件)的传播与冒泡
特性说明和原理图: 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡 标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8-用e.cancelBubble属性来阻冒泡,注意ie9不支持cancelBubble属性(设置后不生效),但chrome、safari、opera、firefox都支持cancelBubble属性。 Ie8-用attachEvent为dom元素添加一个事件,但必须在事件名前加上on,此类事件只能在元素的冒
sam dragon
2018/01/17
1.2K0
JS-事件之鼠标、键盘都能控制的下拉选框效果
<script type="text/javascript"> window.onload=function(e){ var box=document.getElementById('divselect'), title=box.getElementsByTagName('cite')[0], menu=box.getElementsByTagName('ul')[0], as=box.getElementsByTagName('a'),//as是一个
xing.org1^
2018/05/17
3.4K0
React技巧之表单提交获取input值
原文链接:https://bobbyhadz.com/blog/react-get-form-input-value-on-submit[1]
chuckQu
2022/08/19
1.8K0
React技巧之表单提交获取input值
表单脚本
刚开始人们使用JavaScript,最主要的目的之一就是表单的验证,分担服务器处理表单的责任。虽然现流行的大部分提交方式是通过ajax,但了解表单,对于ajax方式也是有重大帮助的!所以,大家不要看轻表单。
奋飛
2019/08/15
5.1K0
相关推荐
vue 实现移动端键盘搜索事件监听
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验