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

摘要：

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