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

在这里插入图片描述

摘要:

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

原文地址:https://blog.csdn.net/weixin_45788691/article/details/135858300

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_63591.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注