键盘方向键移动当前选中的table单元格，并可以输入内容

有类似于这样的表格，用的<table>标签。原本要在单元格的文本框里面输入内容，需要用鼠标一个一个去点以获取焦点，现在需要不用鼠标选中，直接用键盘的上下左右来移动当前正在输入的单元格文本框。

 const currentCell = React.useRef<HTMLElement | null>() // 储存当前选中的单元格const  handleArrowKeys = (event) => { // 当按下键盘方向键做的事情if (!currentCell || !currentCell.current) return;const cellIndex = currentCell?.current?.cellIndex;let newCell;switch (event.key) {case 'ArrowUp':newCell = currentCell.current?.parentElement?.previousElementSibling?.cells[cellIndex];break;case 'ArrowDown':newCell = currentCell.current?.parentElement?.nextElementSibling?.cells[cellIndex];break;case 'ArrowLeft':newCell = currentCell?.current?.previousElementSibling;break;case 'ArrowRight':newCell = currentCell?.current?.nextElementSibling;break;default:break;}if (newCell) {if(currentCell?.current){currentCell.current.style.border = 'solid 2px black'// currentCell.current.style.boxShadow = 'none'}currentCell.current = newCellnewCell.style.border = '3px solid #1890ff'// newCell.style.borderColor = '#1890ff'// newCell.style.boxShadow = '0 0 10px 5px #1890ff'}}useEffect(()=>{// 鼠标点击事件，因为第一次选中单元格肯定是要点击document.addEventListener("click", (e: MouseEvent) => {const target = e.target as HTMLElement// console.log(target.tagName, 'target')// 这里要判断被点击的对象是不是你需要监听的表格的单元格const isActive = (target.tagName === 'TD' || target.tagName === 'TH') && ...if (isActive) {if(currentCell?.current){ // 将原本被选中的单元格样式改为正常样式currentCell.current.style.border = 'solid 2px black'}// 新的单元格存起来，并高亮显示currentCell.current = targettarget.style.border = '3px solid #1890ff'} else {// 如果被点击的不是需要监听的地方，则整个表格“失去焦点”if(currentCell?.current){currentCell.current.style.border = 'solid 2px black'currentCell.current = null}}})document.addEventListener('keydown', function(e) {// console.log(e, 'e')if (e.ctrlKey || e.altKey){// 这是按ctrl+  alt+的情况，很多快捷键方式不知道怎么模仿。} else if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') {handleArrowKeys(e);} else if (e.key === 'Insert' ||  // 按下的是插入键e.key === 'Home' ||  // 按下的是Home键e.key === 'End'  // 按下的是End键// 其他需要处理的按键) {return} else{if(!currentCell || !currentCell.current) returnlet childNodes = currentCell.current.childNodeslet inputIndex: any = null, textAreaIndex: any = nullchildNodes.forEach((node, index) => {if(node.tagName === 'INPUT') inputIndex = indexif(node.tagName === 'TEXTAREA') textAreaIndex = index})if(inputIndex !== null){if (e.key === 'Backspace' ||  // 按下的是退格键e.key === 'Delete'// 其他需要处理的按键) {childNodes[inputIndex].value = ''} else if(e.key.length === 1) {childNodes[inputIndex].value = childNodes[inputIndex].value + e.key}}else if(textAreaIndex !== null){if (e.key === 'Backspace' ||  // 按下的是退格键e.key === 'Delete'// 其他需要处理的按键) {childNodes[textAreaIndex].value = ''} else if(e.key.length === 1) {childNodes[textAreaIndex].value = childNodes[inputIndex].value + e.key}}}});},[])

这种方式，实现的功能就是点击单元格，注意不能点击到格里的文本框（因为我觉得文本框都是单击它就获取了焦点，键盘方向键也是用来控制光标位置的，这里没有过多的去纠结去探究，也许可以做到），然后键盘的上下左右就能控制当前选中的单元格，输入，就能改变单元格的文本框的值。其实这样我觉得就和excel单击单元格选中，输入就是覆盖整个内容，方向键控制选中单元格；双击单元格才是继续编辑单元格内容，方向键控制光标差不多，不过我这个变成了单击单元格是选中，然后输入覆盖，单击文本框是继续输入。

但是，这样是有弊端的，代码中也能看出来，对于ctrl+，alt+这些快捷键的功能我没有模仿出来，可能跟个人能力有关，而且就算有办法我觉得可能也太复杂了（不想折腾），还有就是很重要的一点，他没办法输入中文，因为我是监听键盘按下的事件，然后获得它的key，那用户想输入中文，我也只能获取到一个一个的英文字母（本人也想过偷懒，因为这个系统这里的表格大多数是不用输入中文，少数有中文，后面闲着没事，就问了chat gpt得到一些灵感）。

 const currentCell = React.useRef<HTMLElement | null>() // 储存当前选中的单元格const  handleArrowKeys = (event) => { // 当按下键盘方向键做的事情if (!currentCell || !currentCell.current) return;const cellIndex = currentCell?.current?.cellIndex;let newCell;switch (event.key) {case 'ArrowUp':newCell = currentCell.current?.parentElement?.previousElementSibling?.cells[cellIndex];break;case 'ArrowDown':newCell = currentCell.current?.parentElement?.nextElementSibling?.cells[cellIndex];break;case 'ArrowLeft':newCell = currentCell?.current?.previousElementSibling;break;case 'ArrowRight':newCell = currentCell?.current?.nextElementSibling;break;default:break;}if (newCell) {if(currentCell?.current){currentCell.current.style.border = 'solid 2px black'let input = document.getElementById("dynamicInput");if (input) {input.remove();}}currentCell.current = newCellnewCell.style.border = '3px solid #1890ff'let input = document.createElement("input");input.type = "text";input.style.position = "absolute";input.style.left = "-9999px";input.id = "dynamicInput";newCell.appendChild(input);input.addEventListener("input", handleInput);input.focus();}}const handleInput = (e) => {if(!currentCell || !currentCell.current) returnlet childNodes = currentCell.current.childNodeslet inputIndex: any = null, textAreaIndex: any = nullchildNodes.forEach((node, index) => {console.log(node, 'node')if(node.tagName === 'INPUT' && !node.id) inputIndex = indexif(node.tagName === 'TEXTAREA') textAreaIndex = index})console.log(e, 'e')if(inputIndex !== null){childNodes[inputIndex].value = e.target.value}else if(textAreaIndex !== null){childNodes[textAreaIndex].value = e.target.value}}useEffect(()=>{// 鼠标点击事件，因为第一次选中单元格肯定是要点击document.addEventListener("click", (e: MouseEvent) => {const target = e.target as HTMLElement// console.log(target.tagName, 'target')// 这里要判断被点击的对象是不是你需要监听的表格的单元格const isActive = (target.tagName === 'TD' || target.tagName === 'TH') && ...if (isActive) {if(currentCell?.current){ // 将原本被选中的单元格样式改为正常样式currentCell.current.style.border = 'solid 2px black'let input = document.getElementById("dynamicInput");if (input) {input.remove();}}// 新的单元格存起来，并高亮显示currentCell.current = targettarget.style.border = '3px solid #1890ff'let input = document.createElement("input");input.type = "text";input.id = "dynamicInput";input.style.position = "absolute";input.style.left = "-9999px";target.appendChild(input);input.addEventListener("input", handleInput);input.focus();} else {// 如果被点击的不是需要监听的地方，则整个表格“失去焦点”if(currentCell?.current){currentCell.current.style.border = 'solid 2px black'currentCell.current = nulllet input = document.getElementById("dynamicInput");if (input) {input.remove();}}}})document.addEventListener('keydown', function(e) {// console.log(e, 'e')if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') {handleArrowKeys(e);}});},[])

后面这种方法就改成了给当前选中的单元格插入一个用户看不到的自动获取焦点的input，然后监听这个文本框的input事件，并实时将这个文本框的内容更新到对应的文本框。才刚实现这个，没有经过大量操作的测试，不知道会不会有什么bug，目前没有什么大问题。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/199456.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

STM32硬件调试器不一定准确，proteus不一定准确

STM32硬件调试器不一定准确，proteus不一定准确

我在做实验的过程中&#xff0c;发现里面的那个变量ii一直都不变搞了很久没有发现问题&#xff0c; 然后怀疑是不是软件出了问题&#xff0c;然后直接只用单片机的一个灯泡来检测是否正常&#xff0c;发现&#xff1a;单片机里面正常&#xff0c;但是硬件调试的时候&#xff0…
阅读更多...
数据结构--字符串的模式匹配

数据结构--字符串的模式匹配

案例导入概念 朴素&#xff08;暴力&#xff09;模式匹配算法 定位操作&#xff1a; 计算时间复杂度 总结
阅读更多...
redis-持久化

redis-持久化

目录 一、RDB RDB触发保存的两种方式 优劣势总结 二、AOF AOF持久化流程&#xff1a; 1、开启AOP 2、异常恢复 3、AOF的同步频率设置 4、ReWrite压缩 5、优劣势总结 Redis 4.0 混合持久化 redis是内存数据库&#xff0c;所有的数据都会默认存在内存中&#xff0c;如…
阅读更多...
【代数学习题3】从零理解数域扩张与嵌入 —— 同构、商环、分裂域与同态映射

【代数学习题3】从零理解数域扩张与嵌入 —— 同构、商环、分裂域与同态映射

数域的结构——数域的扩张、嵌入 写在最前面从零开始的概念合集从零理解数域的扩张和同构概念基本概念同构的概念商环的概念 2 3 \sqrt[3]{2} 32 ​ 有三个 Q \mathbb{Q} Q-嵌入&#xff08;同态映射&#xff09; Q ( 2 3 ) \mathbb{Q}(\sqrt[3]{2}) Q(32 ​) 和 Q [ x ] / (…
阅读更多...
【练习】检测U盘并自动复制内容到电脑的软件

【练习】检测U盘并自动复制内容到电脑的软件

软件作用&#xff1a; 有U盘插在电脑上后&#xff0c;程序会检测到U盘的路径。 自己可以提前设置一个保存复制文件的路径或者使用为默认保存的复制路径&#xff08;默认为桌面&#xff0c;可自行修改&#xff09;。 检测到U盘后程序就会把U盘的文件复制到电脑对应的…
阅读更多...
集群搭建（redis7）

集群搭建（redis7）

一、主从复制(replica)&#xff08;不推荐&#xff09; 介绍 主从复制 mmaster以写为主&#xff0c;slave以读为主当master数据变化时&#xff0c;自动将新的数据异步同步到其他slave数据库 读写分离down机恢复数据备份水平扩容支撑高并发 基本操作 配从不配主 权限细节 maste…
阅读更多...
JVS低代码表单设计：数据联动详解（多级数据级、数据回显等）

JVS低代码表单设计：数据联动详解（多级数据级、数据回显等）

在这信息化时代&#xff0c;表单作为数据的收集和展示工具&#xff0c;已经渗透到不同的角落。JVS低代码对表单的设计和操作进行了不断的优化和创新。其中&#xff0c;联动回显作为一项重要的功能&#xff0c;无论是多级数据级联控制、组件的联动控制&#xff0c;还是多表的数据…
阅读更多...
通信网络安全防护定级备案流程介绍（附流程图）

通信网络安全防护定级备案流程介绍（附流程图）

通信网络安全防护定级备案是拥有增值电信业务经营许可证并且有开展电信业务的企业要做的一件事情。刚接触这块的家人们在填报操作的时候可能对具体通信网络安全防护定级备案流程还不是很清楚&#xff0c;所以就给大家画张具体的流程图吧&#xff0c;可以更加直观的了解。 通信…
阅读更多...
JVM的运行时数据区

JVM的运行时数据区

Java虚拟机&#xff08;JVM&#xff09;的运行时数据区是程序在运行过程中使用的内存区域&#xff0c;主要包括以下几个部分&#xff1a; 程序计数器虚拟机栈本地方法栈堆方法区运行时常量池直接内存 不同的虚拟机实现可能会略有差异。这些区域协同工作&#xff0c;支持Java…
阅读更多...
ElasticSearch在Windows上的下载与安装

ElasticSearch在Windows上的下载与安装

Elasticsearch是一个开源的分布式搜索和分析引擎&#xff0c;它可以帮助我们快速地搜索、分析和处理大量数据。Elasticsearch能够快速地处理结构化和非结构化数据&#xff0c;支持全文检索、地理位置搜索、自动补全、聚合分析等功能&#xff0c;能够承载各种类型的应用&#xf…
阅读更多...
Sql Server 2017主从配置之：发布订阅

Sql Server 2017主从配置之：发布订阅

使用发布订阅模式搭建Sql Server 2017主从同步&#xff0c;类似事件通知机制&#xff0c;基本可以做到准实时同步&#xff0c;可以同时做到一对多的数据同步。 不过发布订阅模式&#xff0c;只能同时数据&#xff0c;不能同步表结构。在创建发布的时候&#xff0c;需要选择需要…
阅读更多...
ospf路由选路及路由汇总

ospf路由选路及路由汇总

一、知识补充 1、ABR和ASBR 1.1 ABR ABR指的是边界路由&#xff0c;通常位于两个或多个区域之间&#xff0c;用于在不同的OSPF区域之间传递信息。当一个路由器同时连接到两个或多个区域时&#xff0c;它就成为了ABR&#xff0c;它需要维护每个区域的拓扑信息和路由表&#x…
阅读更多...
【Kingbase FlySync】命令模式:部署双轨并行，并实现切换同步

【Kingbase FlySync】命令模式:部署双轨并行，并实现切换同步

【Kingbase FlySync】命令模式:安装部署同步软件&#xff0c;实现Oracle到KES实现同步 双轨并行方案说明一.准备工作二.环境说明三.目标实操(1).准备安装环境Orcle服务器(Oracle40)1.上传所有工具包2.操作系统配置a.增加flysync 用户、设置密码b.配置环境变量c.调整limits.conf…
阅读更多...
git问题： git@10.18.*.*: Permission denied (publickey,password)

git问题： git@10.18.*.*: Permission denied (publickey,password)

遇到的问题&#xff1a; openSSH版本太高&#xff0c;openssh高版本默认禁止ssh-rsa加密算法&#xff0c;直接换ed25519 执行以下命令&#xff1a; 在.ssh目录下执行&#xff1a;ssh-keygen -t ed25519 -C “youremail.com” ssh-add ~/.ssh/id_ed25519 将id_ed25519.pub添加…
阅读更多...
解决证书加密问题：OpenSSL与urllib3的兼容性与优化

解决证书加密问题：OpenSSL与urllib3的兼容性与优化

在使用客户端证书进行加密通信时&#xff0c;用户可能会遇到一些问题。特别是当客户端证书被加密并需要密码保护时&#xff0c;OpenSSL会要求用户输入密码。这对于包含多个调用的大型会话来说并不方便&#xff0c;因为密码无法在连接的多个调用之间进行缓存和重复使用。用户希望…
阅读更多...
PPT幻灯片里的图片，批量提取

PPT幻灯片里的图片，批量提取

之前分享过如何将PPT文件导出成图片&#xff0c;今天继续分享PPT技巧&#xff0c;如何提取出PPT文件里面的图片。 首先&#xff0c;我们将PPT文件的后缀名&#xff0c;修改为rar&#xff0c;将文件改为压缩包文件 然后我们将压缩包文件进行解压 最好是以文件夹的形式解压出来…
阅读更多...
PgSQL技术内幕-Bitmap Index Scan

PgSQL技术内幕-Bitmap Index Scan

PgSQL技术内幕-Bitmap Index Scan 1、简介 Bitmap索引扫描是对索引扫描的一个优化&#xff0c;通过建立位图的方式将原来的随机堆表访问转换成顺序堆表访问。主要分为两点&#xff1a;1&#xff09;管理每个Bitmap的hash slot没用完时&#xff0c;每个Bitmap代表每个heap页中满…
阅读更多...
【蓝桥杯选拔赛真题23】C++计算24 第十二届蓝桥杯青少年创意编程大赛C++编程选拔赛真题解析

【蓝桥杯选拔赛真题23】C++计算24 第十二届蓝桥杯青少年创意编程大赛C++编程选拔赛真题解析

C/C++计算24 第十二届蓝桥杯青少年创意编程大赛C++选拔赛真题 一、题目要求 1、编程实现 “计算 24”是一个流传已久的数字游戏，小蓝最近对此痴迷不已 游戏规则是：从 1~10 之间的自然数任意拿出 4 个数(4 个数各不相同，顺序随机)，进行加、减、乘三种运算(使用某种运算…
阅读更多...
什么是BT种子！磁力链接又是如何工作的？

什么是BT种子！磁力链接又是如何工作的？

目录 一.什么是BT&#xff1f;1.BT简介&#xff1a;1.1.BT是目前最热门的下载方式之一1.2.BT服务器是通过一种传销的方式来实现文件共享的 2.小知识&#xff1a;2.1.你知道吗BT下载和常规下载到底有哪些不同2.2.BT下载的灵魂&#xff1a;种子2.3.当下载结束后&#xff0c;如果未…
阅读更多...
matlab 坡度滤波算法地面分割

matlab 坡度滤波算法地面分割

目录 一、算法原理1、实现流程2、参考文献二、代码实现三、结果展示四、测试数据一、算法原理 1、实现流程 1、格网示意图 2、计算格网行列数 公式中的特殊符号为向上取整，
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023