前端怎么监听手机键盘是否弹起
摘要:
开发移动端中,经常会遇到一些交互需要通过判断手机键盘是否被唤起来做的,说到判断手机键盘弹起和收起,应该都知道,安卓和ios判断手机键盘是否弹起的写法是有所不同的,下面讨论总结一下两端的区别以及上线方式~
HTML:
IOS端可以通过 focusin focusout
实现
window.addEventListener('focusin', () => {// 键盘弹出事件处理alert("ios键盘弹出事件处理")
});
window.addEventListener('focusout', () => {// 键盘收起事件处理alert("ios键盘收起事件处理")
})
安卓只能通过 resize
来判断屏幕大小是否发生变化来判断
由于某些 Android 手机收起键盘,输入框不会失去焦点,所以不能通过聚焦和失焦事件来判断。但由于窗口会变化,所以可以通过监听窗口高度的变化来间接监听键盘的弹起与收回。
const innerHeight = window.innerHeight
window.addEventListener('resize', () => {const newInnerHeight = window.innerHeight;if (innerHeight > newInnerHeight) {// 键盘弹出事件处理alert("android 键盘弹出事件"); } else {// 键盘收起事件处理alert("android 键盘收起事件处理")}
})
VUE:
键盘事件总结:
@keydown
:监听键盘按下事件。
@keyup
:监听键盘抬起事件。
@keypress
:监听键盘按键事件,包括按下和抬起。
@keydown.enter
:监听回车键按下事件。
@keydown.tab
:监听Tab键按下事件。
@keydown.esc
:监听Esc键按下事件。
@keydown.space
:监听空格键按下事件。
@keydown.left
:监听左箭头键按下事件。
@keydown.right
:监听右箭头键按下事件。
@keydown.up
:监听上箭头键按下事件。
@keydown.down
:监听下箭头键按下事件。
@keydown.delete
:监听删除键按下事件。
@keydown.backspace
:监听退格键按下事件。
@keydown.[key]
:监听其他特定键按下事件,例如@keydown.a监听字母A键按下事件。
@keydown
或@keyup
指令来绑定键盘按键事件
<template><div><input type="text" @keydown.enter="handleEnterKey" /></div>
</template><script>
export default {methods: {handleEnterKey() {// 处理回车键按下事件},},
};
</script>
v-on
指令来绑定键盘按键事件
<template><div><input type="text" v-on:keydown.enter="handleEnterKey" /></div>
</template><script>
export default {methods: {handleEnterKey() {// 处理回车键按下事件},},
};
</script>
window.addEventListener
来全局监听键盘按键事件
<template><div></div>
</template><script>
export default {mounted() {window.addEventListener('keydown', this.handleKeyDown);},beforeUnmount() {window.removeEventListener('keydown', this.handleKeyDown);},methods: {handleKeyDown(event) {if (event.key === 'Enter') {// 处理回车键按下事件}},},
};
</script>
vue-shortkey
插件来监听键盘按键
<template><div><input type="text" v-shortkey.enter="handleEnterKey" /></div>
</template><script>
import VueShortkey from 'vue-shortkey';export default {directives: {shortkey: VueShortkey,},methods: {handleEnterKey() {// 处理回车键按下事件},},
};
</script>
keydown
事件监听器
<template><div><input type="text" ref="input" /></div>
</template><script>
export default {mounted() {this.$refs.input.addEventListener('keydown', this.handleKeyDown);},beforeUnmount() {this.$refs.input.removeEventListener('keydown', this.handleKeyDown);},methods: {handleKeyDown(event) {if (event.key === 'Enter') {// 处理回车键按下事件}},},
};
</script>
监听事件组件封装:
<template><div></div>
</template><script>
export default {name: 'KeyboardEventListener',props: {event: {type: String,required: true,},},mounted() {window.addEventListener(this.event, this.handleEvent);},beforeUnmount() {window.removeEventListener(this.event, this.handleEvent);},methods: {handleEvent(event) {this.$emit('keydown', event);},},
};
</script>
可以在需要监听键盘事件的地方引入并使用KeyboardEventListener
组件,并通过event
属性传递需要监听的事件名称,同时监听keydown
事件来处理具体的按键逻辑。
<template><div><KeyboardEventListener event="keydown.enter" @keydown="handleEnterKey" /></div>
</template><script>
import KeyboardEventListener from '@/components/KeyboardEventListener.vue';export default {components: {KeyboardEventListener,},methods: {handleEnterKey(event) {// 处理回车键按下事件},},
};
</script>
通过封装组件,可以在需要监听键盘事件的地方直接引入并使用,避免重复的监听和处理逻辑,提高代码的可维护性和复用性
REACT:
在需要进行监听的Dom上添加 onKeyDown
方法:
<ButtonclassName='btn-add'type="primary"icon="search"onKeyDown={(e)=>this.handleKeyDown(e)}onClick={()=>this.handleSearch()}>{LangMapping.Search}</Button>
定义 handleKeyDown
方法及事件处理:
//keyCode 38=up arrow 40=down arrow 13=Enter
handleKeyDown = (e) => {if (e.keyCode === 13) {console.log("按下了Enter键")this.handleSearch();}
}
在 componentDidMount
钩子中定义键盘监听事件:
componentDidMount() {document.addEventListener('keydown',this.handleKeyDown);
}
在 componentWillUnmount
钩子中移除键盘监听事件:
componentWillUnmount() {document.removeEventListener('keydown',this.handleKeyDown);
}
ANGULAR:
检测键盘按下事件:
可以使用ng-keydown
指令。该指令可以监听指定元素上的键盘按下事件,并在按下事件发生时调用指定的表达式
<input type="text" ng-keydown="handleKeyDown($event)">
我们在一个文本输入框上使用了ng-keydown
指令,并将handleKeyDown
函数绑定到该事件上。当用户按下键盘上的任意键时,handleKeyDown
函数将被调用。
$scope.handleKeyDown = function(event) {console.log('Key down event:', event);
};
handleKeyDown
函数接收一个事件对象作为参数。我们可以通过该事件对象来获取按下的键的信息,例如键码(keyCode
)、键的字符表示(key
)等
检测按键事件:
可以使用ng-keypress
指令。该指令可以监听指定元素上的按键事件,并在按键事件发生时调用指定的表达式
<input type="text" ng-keypress="handleKeyPress($event)">
在一个文本输入框上使用了ng-keypress
指令,并将handleKeyPress
函数绑定到该事件上。当用户按下并且释放某个键时,handleKeyPress
函数将被调用
$scope.handleKeyPress = function(event) {console.log('Key press event:', event);
};
与ng-keydown
指令类似,handleKeyPress
函数也接收一个事件对象作为参数,我们可以通过该事件对象来获取按下的键的信息
区分按键类型:
有时候,我们可能需要区分按下的是哪种类型的按键,例如字母键、数字键、功能键等。在AngularJS中,我们可以使用事件对象的属性来区分按键类型
event.key
:按下的键的字符表示,例如’a’、’0’、’Enter’等。
event.keyCode
:按下的键的键码表示,对应于键盘上每个键的唯一标识。
event.shiftKey
:按下了Shift键。
event.ctrlKey
:按下了Ctrl键。
event.altKey
:按下了Alt键。
通过检查事件对象的这些属性,我们可以根据需要来区分按键类型
$scope.handleKeyDown = function(event) {if (event.key === 'Enter') {console.log('Enter key pressed');} else if (event.keyCode >= 48 && event.keyCode <= 57) {console.log('Number key pressed');} else {console.log('Other key pressed');}
};
们根据按下的键的字符表示和键码表示来区分按键类型。如果按下的是Enter
键,则输出”Enter key pressed”;如果按下的是数字键,则输出”Number key pressed”;如果按下的是其他键,则输出”Other key pressed”。
相关文章:

前端怎么监听手机键盘是否弹起
摘要: 开发移动端中,经常会遇到一些交互需要通过判断手机键盘是否被唤起来做的,说到判断手机键盘弹起和收起,应该都知道,安卓和ios判断手机键盘是否弹起的写法是有所不同的,下面讨论总结一下两端的区别以及…...

本地生活服务平台加盟前景与市场分析
随着短视频市场的的不断发展,人们的生活方式也在发生着巨大的变化。在这个数字化的时代,越来越多的创业者开始注重本地生活服务,这也为创业者提供了一个绝佳的商机。加盟本地生活服务平台,既可以抓住这波风口,又可以满…...

蓝桥杯备战——7.DS18B20温度传感器
1.分析原理图 通过上图我们可以看到DS18B20通过单总线接到了单片机的P14上。 2.查阅DS18B20使用手册 比赛的时候是会提供DS18B20单总线通讯协议的代码,但是没有提供读取温度数据的代码,所以还是需要我们去查看手册,我只把重要部分截下来了 …...

黑盒测试用例的具体设计方法(7种)
7种常见的黑盒测设用例设计方法,分别是等价类、边界值、错误猜测法、场景设计法、因果图、判定表、正交排列。 (一)等价类 1.概念 依据需求将输入(特殊情况下会考虑输出)划分为若干个等价类,从等价类中选…...

docker镜像管理命令
文章目录 docker imagesdocker builddocker rmidocker tagdocker savedocker loaddocker importdocker commitdocker login/logoutdocker pulldocker pushdocker search总结 docker images 列出本地镜像。 docker images [OPTIONS] [REPOSITORY[:TAG]]OPTIONS说明:…...

深入理解STM32中断处理机制
深入理解STM32中断及其使用方法(基于HAL库) STM32微控制器作为一款强大的嵌入式系统芯片,在各种应用中都需要使用中断来实现实时响应和处理各种事件。本文将深入讨论STM32中断的概念、HAL库的中断处理机制以及如何在STM32CubeMX中配置和使用…...

基于机器学习的地震预测(Earthquake Prediction with Machine Learning)
基于机器学习的地震预测(Earthquake Prediction with Machine Learning) 一、地震是什么二、数据组三、使用的工具和库四、预测要求五、机器学习进行地震检测的步骤六、总结 一、地震是什么 地震几乎是每个人都听说过或经历过的事情。地震基本上是一种自…...

《30天自制操作系统》 第一周(D1-D7) 笔记
前言:这是我2023年5月份做的一个小项目,最终是完成了整个OS。笔记的话,只记录了第一周。想完善,却扔在草稿箱里许久。最终决定,还是发出来存个档吧。 一、汇编语言 基础指令 MOV: move赋值,数据传送指令…...

SQL注入:报错注入
SQL注入系列文章:初识SQL注入-CSDN博客 SQL注入:联合查询的三个绕过技巧-CSDN博客 目录 什么是报错注入? 报错注入常用的3个函数 UpdateXML ExtractValue Floor rand(随机数) floor(向上取整&…...

K8s 安装部署-Master和Minion(Node)文档
K8s 安装部署-Master和Minion(Node)文档 操作系统版本:CentOS 7.4 Master :172.20.26.167 Minion-1:172.20.26.198 Minion-2:172.20.26.210(后增加节点) ETCD:172.20.27.218 先安装部署ETC…...

OpenAI 降低价格并修复拒绝工作的“懒惰”GPT-4,另外ChatGPT 新增了两个小功能
OpenAI降低了GPT-3.5 Turbo模型的API访问价格,输入和输出价格分别降低了50%和25%。这对于使用API进行文本密集型应用程序的用户来说是一个好消息。 OpenAI官网:OpenAI AIGC专区:aigc 教程专区:AI绘画,AI视频&#x…...
springboot+value静态属性获取配置文件中的值的操作方法
1.配置类需要让spring管理 2.set方法不要加static 3.如果静态属性是private修饰,则在使用的时候,需要 类名.getXXX方法 如果静态属性是public修饰,则在使用的时候,需要 类名.属性名 import org.springframework.beans.factory.an…...

Prometheus 架构全面解析
在本指南中,我们将详细介绍 Prometheus 架构。 Prometheus 是一个用 Golang 编写的开源监控和告警系统,能够收集和处理来自各种目标的指标。您还可以查询、查看、分析指标,并根据阈值收到警报。 此外,在当今世界,可观…...

把批量M3U8网络视频地址转为MP4视频
在数字媒体时代,视频格式的转换已成为一项常见的需求。尤其对于那些经常处理网络视频的用户来说,将M3U8格式的视频转换为更常见的MP4格式是一项必备技能。幸运的是,现在有了固乔剪辑助手这款强大的工具,这一过程变得异常简单。下面…...

联合 Maxlinear 迈凌 与 Elitestek 易灵思 - WPI 世平推出基于 FPGA 芯片的好用高效电源解决方案
近期 WPI 世平公司联合 Maxlinear 迈凌电源产品搭配 Elitestek 易灵思 FPGA 共同合作推出基于 FPGA 芯片的好用高效电源解决方案。 Elitestek 易灵思 FPGA 核心产品有 2 大系列 : Trion 系列与钛金系列。Trion 系列主要特点是 : 1. 40nm 工艺 2. 超低功耗 ( 可低至竞争对手的 …...

Keycloak - docker 运行 前端集成
Keycloak - docker 运行 & 前端集成 这里的记录主要是跟我们的项目相关的一些本地运行/测试,云端用的 keycloak 版本不一样,不过本地我能找到的最简单的配置是这样的 docker 配置 & 运行 keycloak keycloak 有官方(Red Hat Inc.)的镜像&#…...

架构篇27:如何设计计算高可用架构?
文章目录 主备主从集群小结计算高可用的主要设计目标是:当出现部分硬件损坏时,计算任务能够继续正常运行。因此计算高可用的本质是通过冗余来规避部分故障的风险,单台服务器是无论如何都达不到这个目标的。所以计算高可用的设计思想很简单:通过增加更多服务器来达到计算高可…...
Python 有用的库模块
简介 Python中有许多常用的库或者模块,在写代码的时候或多或少会遇到,本文对其进行总结,方便日后查阅。 pprint Python中的pprint模块是用于打印数据结构(如字典,列表等)的模块,提供了一种以…...

vivado DDS学习
实现DDS通常有两种方式,一种是读取ROM存放的正弦/余弦信号的查表法,另一种是用DDS IP核。这篇学习笔记中,我们要讲解说明的是VIVADO DDS IP核的应用。 目前本篇默认Phase Generator and SIN/COS LUT(DDS)的standard模式…...

微信小程序(十六)slot插槽
注释很详细,直接上代码 上一篇 温馨提醒:此篇需要自定义组件的基础,如果不清楚请先看上一篇 新增内容: 1.单个插槽 2.多个插槽 单个插糟 源码: myNav.wxml <view class"navigationBar custom-class">…...

UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...

Flask RESTful 示例
目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题: 下面创建一个简单的Flask RESTful API示例。首先,我们需要创建环境,安装必要的依赖,然后…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代,智能代理(agents)不再是孤立的个体,而是能够像一个数字团队一样协作。然而,当前 AI 生态系统的碎片化阻碍了这一愿景的实现,导致了“AI 巴别塔问题”——不同代理之间…...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...

AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...

有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...