企业网站建设推广,紧急通知界面访问升级中狼人,潍坊中脉网站建设公司,wordpress怎么仿站摘要#xff1a; 开发移动端中#xff0c;经常会遇到一些交互需要通过判断手机键盘是否被唤起来做的#xff0c;说到判断手机键盘弹起和收起#xff0c;应该都知道#xff0c;安卓和ios判断手机键盘是否弹起的写法是有所不同的#xff0c;下面讨论总结一下两端的区别以及…
摘要 开发移动端中经常会遇到一些交互需要通过判断手机键盘是否被唤起来做的说到判断手机键盘弹起和收起应该都知道安卓和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指令来绑定键盘按键事件
templatedivinput typetext keydown.enterhandleEnterKey //div
/templatescript
export default {methods: {handleEnterKey() {// 处理回车键按下事件},},
};
/scriptv-on指令来绑定键盘按键事件
templatedivinput typetext v-on:keydown.enterhandleEnterKey //div
/templatescript
export default {methods: {handleEnterKey() {// 处理回车键按下事件},},
};
/script
window.addEventListener来全局监听键盘按键事件
templatediv/div
/templatescript
export default {mounted() {window.addEventListener(keydown, this.handleKeyDown);},beforeUnmount() {window.removeEventListener(keydown, this.handleKeyDown);},methods: {handleKeyDown(event) {if (event.key Enter) {// 处理回车键按下事件}},},
};
/script
vue-shortkey插件来监听键盘按键
templatedivinput typetext v-shortkey.enterhandleEnterKey //div
/templatescript
import VueShortkey from vue-shortkey;export default {directives: {shortkey: VueShortkey,},methods: {handleEnterKey() {// 处理回车键按下事件},},
};
/script
keydown事件监听器
templatedivinput typetext refinput //div
/templatescript
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
监听事件组件封装
templatediv/div
/templatescript
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事件来处理具体的按键逻辑。
templatedivKeyboardEventListener eventkeydown.enter keydownhandleEnterKey //div
/templatescript
import KeyboardEventListener from /components/KeyboardEventListener.vue;export default {components: {KeyboardEventListener,},methods: {handleEnterKey(event) {// 处理回车键按下事件},},
};
/script通过封装组件可以在需要监听键盘事件的地方直接引入并使用避免重复的监听和处理逻辑提高代码的可维护性和复用性
REACT:
在需要进行监听的Dom上添加 onKeyDown 方法
ButtonclassNamebtn-addtypeprimaryiconsearchonKeyDown{(e)this.handleKeyDown(e)}onClick{()this.handleSearch()}{LangMapping.Search}/Button定义 handleKeyDown 方法及事件处理
//keyCode 38up arrow 40down arrow 13Enter
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 typetext ng-keydownhandleKeyDown($event)我们在一个文本输入框上使用了ng-keydown指令并将handleKeyDown函数绑定到该事件上。当用户按下键盘上的任意键时handleKeyDown函数将被调用。
$scope.handleKeyDown function(event) {console.log(Key down event:, event);
};handleKeyDown函数接收一个事件对象作为参数。我们可以通过该事件对象来获取按下的键的信息例如键码keyCode、键的字符表示key等
检测按键事件: 可以使用ng-keypress指令。该指令可以监听指定元素上的按键事件并在按键事件发生时调用指定的表达式
input typetext ng-keypresshandleKeyPress($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”。
