js获取键盘方向键(上下左右),执行相应的方法

224 篇文章 5 订阅
181 篇文章 1 订阅
 //得到按键的信息
  function showkey() {
        key = event.keyCode;
        switch (key) {
            case 37://"按了←键!"
                alert("按了←键!");
                break;
            case 38://"按了↑键!"
                alert("按了↑键!");
                break;
            case 39://"按了→键!"
                alert("按了→键!");
                break;
            case 40://"按了↓键!"
                alert("按了↓键!");
                break;
        }
    }

    document.onkeydown = showkey;
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过以下步骤来实现JavaScript利用键盘方向键(上下键)控制表格行选中: 1. 首先,为表格的每一行添加一个事件监听器,监听键盘方向键的按下事件。 2. 当方向键按下时,获取当前选中的行的索引,以及表格总共有多少行。 3. 根据按下的方向键,更新选中行的索引,如果已经到达了表格的边缘,则循环到另一端。 4. 根据更新后的选中行的索引,添加或移除行的选中状态。 以下是一个简单的实现示例: ```html <table> <tr> <td>Row 1</td> </tr> <tr> <td>Row 2</td> </tr> <tr> <td>Row 3</td> </tr> </table> <script> const table = document.querySelector('table'); const rows = table.querySelectorAll('tr'); let selectedRow = 0; // 为每一行添加事件监听器 rows.forEach((row, index) => { row.addEventListener('keydown', (event) => { if (event.key === 'ArrowUp') { // 上方向键 selectedRow = selectedRow === 0 ? rows.length - 1 : selectedRow - 1; } else if (event.key === 'ArrowDown') { // 下方向键 selectedRow = selectedRow === rows.length - 1 ? 0 : selectedRow + 1; } // 更新行的选中状态 rows.forEach((row, index) => { if (index === selectedRow) { row.classList.add('selected'); } else { row.classList.remove('selected'); } }); }); }); // 默认选中第一行 rows[selectedRow].classList.add('selected'); </script> <style> .selected { background-color: yellow; } </style> ``` 在上面的示例中,我们为每一行添加了一个 `keydown` 事件监听器,当方向键按下时,更新了选中行的索引,并根据索引添加或移除行的选中状态。同时,我们还为选中行添加了一个 `.selected` 样式,以便用户能够清楚地看到哪一行被选中了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值