前端怎么监听手机键盘是否弹起

摘要：

开发移动端中，经常会遇到一些交互需要通过判断手机键盘是否被唤起来做的，说到判断手机键盘弹起和收起，应该都知道，安卓和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 方法：

<Button className='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”。