当前位置: 首页 > news >正文

el-Cascader 中div上绑定keyDown事件

keydown,keyup,keypress

事件默认是给页面上可以聚焦的元素绑定键盘事件,例如input输入框,点击输入框即代表聚焦在该元素上。那么想要给div或者其他不能聚焦的元素上使用键盘事件怎么处理呢?这里用到tabindex属性。

它接受一个整数作为值,具有不同的结果,具体取决于整数的值:

  • tabindex=负值 (通常是 tabindex=“-1”),表示元素是可聚焦的,但是不能通过键盘导航来访问到该元素,用 JS
    做页面小组件内部键盘导航的时候非常有用。
  • tabindex=“0” ,表示元素是可聚焦的,并且可以通过键盘导航来聚焦到该元素,它的相对顺序是当前处于的 DOM 结构来决定的。
  • tabindex=正值,表示元素是可聚焦的,并且可以通过键盘导航来访问到该元素;它的相对顺序按照 tabindex
    的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex,它们的相对顺序按照他们在当前 DOM 中的先后顺序决定。
<div class="key-even" id="editor" tabindex="-1">keyDown
</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

<template><div:class="['el-cascader-panel',border && 'is-bordered']"@keydown="handleKeyDown"><span>这个地址:element-ui/packages/cascader-panel</span><cascader-menuref="menu"v-for="(menu, index) in menus":index="index":key="index":nodes="menu"></cascader-menu></div>
</template>
    handleKeyDown(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-expanded="true"]');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
在这里插入图片描述

相关文章:

el-Cascader 中div上绑定keyDown事件

keydown&#xff0c;keyup&#xff0c;keypress 事件默认是给页面上可以聚焦的元素绑定键盘事件&#xff0c;例如input输入框&#xff0c;点击输入框即代表聚焦在该元素上。那么想要给div或者其他不能聚焦的元素上使用键盘事件怎么处理呢&#xff1f;这里用到tabindex属性。 …...

elementUI 表格滚动分页加载请求数据

需求&#xff1a;elementui Table表格滚动分页&#xff08;不使用分页组件&#xff09;&#xff0c;请求数据。 1、自定义加载更多数据的指令&#xff0c;在utils文件夹中创建 loadMore.js /*** 加载更多数据的指令*/ export default {install(Vue) {Vue.mixin({directives: …...

JAVA面试总结-Redis篇章(五)——持久化

Java面试总结-Redis篇章&#xff08;五&#xff09;——持久化 1.RDBRDB全称Redis Database Backup file (Redis数据备份文件)&#xff0c;也被叫做Redis数据快照。简单来说就是把内存中的所有数据都记录到磁盘中。当Redis实例故障重启后&#xff0c;从磁盘读取快照文件&#x…...

【数据结构】·顺序表函数实现·赶紧学起来呀

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …...

C++,类和对象-多态,制作饮品

#include<iostream> using namespace std;//多态案例&#xff0c;制作饮品class AbstractDrinking { public://煮水virtual void Boil() 0;//冲泡virtual void Brew() 0;//倒入茶杯virtual void PourInCup() 0;//加入辅料virtual void PutSomething() 0;//制作饮品vo…...

网站分析:学习如何分析目标网站的页面结构和URL规律,确定爬取目标和策略。

要学习如何分析目标网站的页面结构和URL规律&#xff0c;确定爬取目标和策略&#xff0c;可以遵循以下步骤&#xff1a; 目标网站的页面结构分析&#xff1a; 寻找目标网站的主页&#xff0c;并观察主页上的链接、导航菜单和内容分类等元素&#xff0c;以了解网站的整体结构。 …...

《向量数据库指南》:向量数据库Pinecone如何集成数据湖

目录 为什么选择Databricks? 为什么选择Pinecone? 设置Spark集群 环境设置 将数据集加载到分区中 创建将文本转换为嵌入的函数 将UDF应用于数据 更新嵌入 摘要 使用Databricks和Pinecone在规模上创建和索引向量嵌入 建立在Apache Spark之上的Databricks是一个强大的…...

Vue3中使用pinia

在Vue 3中使用Pinia&#xff0c;您需要按照以下步骤进行设置&#xff1a; 安装Pinia&#xff1a; npm install pinia创建和配置Pinia存储&#xff1a; // main.jsimport { createApp } from vue import { createPinia } from pinia import App from ./App.vueconst app create…...

Mysql中(@i:=@i+1)的介绍

i:i1 表达式 生成伪列实现自增序列 语法&#xff1a; select (i:i1) as ,t.* from table_name t,(select i:0) as j (i:i1)代表定义一个变量&#xff0c;每次叠加 1&#xff1b; (select i:0) as j 代表建立一个临时表&#xff0c;j是随便取的表名&#xff0c;但别名一定…...

Nexperia和KYOCERA AVX Components Salzburg 就车规氮化镓功率模块达成合作

Nexperia和KYOCERA AVX Components Salzburg 就车规氮化镓功率模块达成合作 基础半导体器件领域的高产能生产专家Nexperia&#xff08;安世半导体&#xff09;近日宣布与国际著名的为汽车行业提供先进电子器件的供应商 KYOCERA AVX Components (Salzburg) GmbH 建立合作关系&am…...

数据库应用:Redis安装部署

目录 一、理论 1.缓存 2.关系型数据库与非关系型数据库 3.Redis 4.Redis安装部署 5.Redis命令工具 6.Redis数据库常用命令 7.Redis多数据库操作 二、实验 1.Redis安装部署 2.Redis命令工具 3.Redis数据库命令 4.Redis多数据库操作 三、问题 1.RESP连接CentOS 7 R…...

7.Docker-compose

文章目录 Docker-compose概念Docker-compose部署YAML文件格式和编写注意事项注意数据结构对象映射序列属组布尔值序列的映射映射的映射JSON格式文本换行锚点和引用 Docker compose配置常用字段docker compose常用命令Docker Compose 文件结构docker compose部署apachedocker co…...

多线程:管程法

管程法 生产者把生产好的数据放入缓冲区&#xff0c;消费者从缓冲区拿出数据 package jingcheng.test.gaoji; //测试生产者消费者模型-->利用缓冲区解决&#xff1a;管程法 //生产者&#xff0c;消费者&#xff0c;产品&#xff0c;缓冲区 public class TestPc {public st…...

7.1 String StringBuffer 和 StringBuilder 的区别是什么? String 为什么是不可变的?

可变性 简单的来说&#xff1a;String 类中使用 final 关键字修饰字符数组来保存字符串&#xff0c;private final char value[]&#xff0c;所以String 对象是不可变的。 补充&#xff08;来自issue 675&#xff09;&#xff1a;在 Java 9 之后&#xff0c;String 、StringBu…...

【C++STL标准库】容器适配器

功能&#xff1a;将功能类似&#xff0c;但是接口不符合的接口转换成另一个接口 stack 栈stack&#xff08;栈&#xff09; 特点&#xff1a;先入后出&#xff0c;只能从栈顶弹出值&#xff0c;只能从栈顶压入值 也就是说栈需要的功能&#xff1a;push_back、pop_back 所以可…...

2023深圳杯(东三省)数学建模ABC题思路及代码

大家好呀&#xff0c;比赛开赛后我一直在去写各个题&#xff0c;深圳杯的难度还是比较大的&#xff0c;在这里给大家带来初步的选题建议及思路。 本次深圳杯小白推荐选择A题&#xff0c;数据分析类题目无论怎样都能完成论文&#xff0c;内容也会比较丰富。学过嵌入信息的可以选…...

Set集合类详解(附加思维导图)

目录 一、Set集合思维导图 二、set集合类常用方法 2.1、HashSet集合常用方法 2.2、TreeSet集合的使用 三、HashSet、LinkedHashSet、TreeSet的使用场景 四、list和set集合的区别 一、Set集合思维导图 二、set集合类常用方法 2.1、HashSet集合常用方法 ①&#xff1a;add…...

【vue3】vue3接收props以及emit的用法

技术&#xff1a;vue3.2.40 UI框架&#xff1a;arco-design 2.44.7 css技术&#xff1a;less 4.1.3 实现&#xff1a;子组件接收props以及通过emit方法传值父组件 vue3使用的组合式API&#xff0c;我这里使用的是defineComponent 1.父页面调用子组件 <template><d…...

【Lua学习笔记】Lua入门

文章目录 Lua变量数据类型变量声明其他表示 Lua语法判断逻辑判断&#xff08;Lua很特殊&#xff0c;这个比较重要&#xff09;短路判断 ifif else 循环whileforrepeat 迭代器泛型for迭代器无状态迭代器多状态的迭代器 Lua函数select方法 数组字符索引_G &#xff08;不是教程&a…...

LLM Data Pipelines: 解析大语言模型训练数据集处理的复杂流程

编者按&#xff1a;在训练大语言模型的过程中,构建高质量的训练数据集是非常关键的一步&#xff0c;但关于构建大模型训练所需数据集的通用数据处理流程&#xff08;Data pipelines)的相关资料极为稀少。 本文主要介绍了基于Common Crawl数据集的数据处理流程。首先,文章概述了…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

Vue3中的computer和watch

computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...

EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势

一、WebRTC与智能硬件整合趋势​ 随着物联网和实时通信需求的爆发式增长&#xff0c;WebRTC作为开源实时通信技术&#xff0c;为浏览器与移动应用提供免插件的音视频通信能力&#xff0c;在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能&#xff0c;对实时…...