js键盘上下左右(方向键)事件

<script language="javascript">
function keygo(evt,cols){
  var cols=cols//列数,手动设置
  var elobj=myform.elements.length;
  //key=window.event.keyCode;不兼容firefox

  key = window .event?evt.keyCode:evt.which;
  if (key==38){//↑
      CurTabIndex=event.srcElement.tabIndex-cols
      for (n=0;n<myform.elements.length;n++){
      if (myform.elements[n].tabIndex==CurTabIndex){
        myform.elements[n].select();
        return true;
            }
        }
    }
  if (key==40){//↓
      CurTabIndex=event.srcElement.tabIndex+cols
    for (n=0;n<myform.elements.length;n++){
      if (myform.elements[n].tabIndex==CurTabIndex){
        myform.elements[n].select();
        return true;
      }
    }
    }
  if (key==37){//←
      CurTabIndex=event.srcElement.tabIndex-1
      for (n=0;n<myform.elements.length;n++){
      if (myform.elements[n].tabIndex==CurTabIndex){
        myform.elements[n].select();
        return true;
            }
        }
    }
  if (key==39){//→
      CurTabIndex=event.srcElement.tabIndex+1
    for (n=0;n<myform.elements.length;n++){
      if (myform.elements[n].tabIndex==CurTabIndex){
        //myform.elements[n].focus();
        myform.elements[n].select();
        return true;
      }
    }
    }
}
</script>

<table width="100%" border="0" cellspacing="0" cellpadding="5">
<form name="myform" id="myform" method="post" onKeyUp="return keygo(event,5)">
  <tr>
    <td><input name="textfield1" type="text" id="textfield" value="有文字也会跳过" /></td>
    <td><input type="text" name="textfield" id="textfield" /></td>
    <td><input type="text" name="textfield" id="textfield" /></td>
    <td><input type="text" name="textfield" id="textfield" value="1netmedia.cn" /></td>
    <td><input type="text" name="textfield" id="textfield" /></td>
  </tr>
  <tr>
    <td><input type="text" name="textfield" id="textfield" /></td>
    <td><input name="textfield" type="text" id="textfield" value="有文字也会跳过" /></td>
    <td><input type="text" name="textfield" id="textfield" /></td>
    <td><input type="text" name="textfield" id="textfield" /></td>
    <td><input type="text" name="textfield" id="textfield" value="1NetMedia Studio" /></td>
  </tr>
  <tr>
    <td><input type="text" name="textfield" id="textfield" value="有文字也会跳过" /></td>
    <td><input type="text" name="textfield" id="textfield" /></td>
    <td><input name="textfield" type="text" id="textfield" value="1netmedia.net" /></td>
    <td><input type="text" name="textfield" id="textfield" /></td>
    <td><input type="text" name="textfield" id="textfield" /></td>
  </tr>
  <tr>
    <td><input type="text" name="textfield" id="textfield" /></td>
    <td><input type="text" name="textfield" id="textfield" /></td>
    <td><input type="text" name="textfield" id="textfield" /></td>
    <td><input type="text" name="textfield" id="textfield" value="『一网传媒』" /></td>
    <td><input type="text" name="textfield" id="textfield" /></td>
  </tr>
  <tr>
    <td><input type="text" name="textfield" id="textfield" /></td>
    <td><input type="text" name="textfield" id="textfield" value="技术交流" /></td>
    <td><input type="text" name="textfield" id="textfield" /></td>
    <td><input type="text" name="textfield" id="textfield" /></td>
    <td><input type="text" name="textfield" id="textfield" /></td>
  </tr>
</form>
</table>

<script type="text/javascript">
  myform.textfield1.focus();
  for (n=0;n<myform.elements.length;n++){
    myform.elements[n].tabIndex=n;
  }

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值