岳阳公司网站建设,做装修业务呢有多少网站,那么多网站都是谁做的,网站建设 工业 青岛keydown#xff0c;keyup#xff0c;keypress
事件默认是给页面上可以聚焦的元素绑定键盘事件#xff0c;例如input输入框#xff0c;点击输入框即代表聚焦在该元素上。那么想要给div或者其他不能聚焦的元素上使用键盘事件怎么处理呢#xff1f;这里用到tabindex属性。
…keydownkeyupkeypress
事件默认是给页面上可以聚焦的元素绑定键盘事件例如input输入框点击输入框即代表聚焦在该元素上。那么想要给div或者其他不能聚焦的元素上使用键盘事件怎么处理呢这里用到tabindex属性。
它接受一个整数作为值具有不同的结果具体取决于整数的值
tabindex负值 (通常是 tabindex“-1”)表示元素是可聚焦的但是不能通过键盘导航来访问到该元素用 JS 做页面小组件内部键盘导航的时候非常有用。tabindex“0” 表示元素是可聚焦的并且可以通过键盘导航来聚焦到该元素它的相对顺序是当前处于的 DOM 结构来决定的。tabindex正值表示元素是可聚焦的并且可以通过键盘导航来访问到该元素它的相对顺序按照 tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex它们的相对顺序按照他们在当前 DOM 中的先后顺序决定。
div classkey-even ideditor tabindex-1keyDown
/div添加上 tabindex 属性后此时div表示可以聚焦但是想要触发键盘事件还需要调用 dom 的 focus() 方法表示页面聚焦在该元素上这样就可以触发键盘事件了。
const dom document.getElementById(editor)
dom.addEventListener(click, this.domClick(dom))
dom.addEventListener(keydown, this.keyDown)domClick(dom) {dom.focus()
},
keyDown(e) {console.log(e.keyCode)
}绑定事件的方式可以改变主要是讲述 tabindex 属性的用法及作用。
el-Cascader 源码解读最后一张图片中li中绑定的tabindex使的li可以聚焦
packages/cascader-panel/src/cascader-panel.vue
templatediv:class[el-cascader-panel,border is-bordered]keydownhandleKeyDownspan这个地址element-ui/packages/cascader-panel/spancascader-menurefmenuv-for(menu, index) in menus:indexindex:keyindex:nodesmenu/cascader-menu/div
/templatehandleKeyDown(e) {console.log(操作键盘是这里---》, e.target)const { target, keyCode } e;switch (keyCode) {case KeyCode.up:const prev getSibling(target, -1);focusNode(prev);break;case KeyCode.down:const next getSibling(target, 1);focusNode(next);break;case KeyCode.left:const preMenu this.$refs.menu[getMenuIndex(target) - 1];if (preMenu) {const expandedNode preMenu.$el.querySelector(.el-cascader-node[aria-expandedtrue]);focusNode(expandedNode);}break;case KeyCode.right:const nextMenu this.$refs.menu[getMenuIndex(target) 1];if (nextMenu) {const firstNode nextMenu.$el.querySelector(.el-cascader-node[tabindex-1]);focusNode(firstNode);}break;case KeyCode.enter:checkNode(target);break;case KeyCode.esc:case KeyCode.tab:this.$emit(close);break;default:return;}},packages/cascader-panel/src/cascader-node.vue
