当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript键盘上下键的操作(选择)

技术文章搜索

关键字

Javascript 中的 javascript键盘上下键的操作(选择)

---

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-12   浏览: 470 ::
收藏到网摘: n/a

javascript键盘事件全面控制脚本代码 JavaScript容错例外处理

不错的使用键盘上下键实现选择的代码，方便用户操作 两段使用键盘的上下键进行选择的代码：
第一段

点击运行可以看到效果:<Script Language="JScript"> function document.onkeydown(){ var rowsArray = document.all('oTable').rows; for(var i=0;i<rowsArray.length;i++){ if(rowsArray[i].children[0].style.backgroundColor=='#dcdcdc'){ switch(window.event.keyCode){ case 38 : if(i-1>=0){ rowsArray[i-1].children[0].style.backgroundColor = '#dcdcdc'; rowsArray[i].children[0].style.backgroundColor = ''; } break; case 40 : if(i+1<=rowsArray.length-1){ rowsArray[i+1].children[0].style.backgroundColor = '#dcdcdc'; rowsArray[i].children[0].style.backgroundColor = ''; } break; } break; } } } function document.onclick(){ if(window.event.srcElement.tagName!='TD'){ return; } var rowsArray = document.all('oTable').rows; for(var i=0;i<rowsArray.length;i++){ if(rowsArray[i].cells[0]==window.event.srcElement){ rowsArray[i].cells[0].style.backgroundColor = '#dcdcdc'; }else{ rowsArray[i].cells[0].style.backgroundColor = ''; } } } </Script> <style> TD { cursor: hand; } </style> <table id="oTable" style="width:240px;border:1px highlight solid; font-size:12px;"> <tr> <td style="background-color:#dcdcdc;">鼠标点击或按↑↓改变行的颜色</td> </tr> <tr> <td>鼠标点击或按↑↓改变行的颜色</td> </tr> <tr> <td>鼠标点击或按↑↓改变行的颜色</td> </tr> <tr> <td>鼠标点击或按↑↓改变行的颜色</td> </tr> </table>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

第二段

点击运行可以看到效果:<table id="tb"> <tr><td>00000000000000</td> </tr> <tr><td>11111111111111</td> </tr> <tr><td>22222222222222</td></tr> <tr><td>33333333333333</td></tr> </table> <script> var i=0; function document.onkeydown(){ if (event.keyCode == 38){ for(var k=0;k<document.getElementById('tb').rows.length;k++){ document.getElementById('tb').rows(k).bgColor=""; } document.getElementById('tb').rows(--i%tb.rows.length).bgColor="#FF0000"; document.all.show.value=document.getElementById('tb').rows(i%tb.rows.length).innerText; } if (event.keyCode== 40){ for(var k=0;k<document.getElementById('tb').rows.length;k++){ document.getElementById('tb').rows(k).bgColor=""; } document.getElementById('tb').rows(++i%document.getElementById('tb').rows.length).bgColor="#FF0000"; document.all.show.value=document.getElementById('tb').rows(i%tb.rows.length).innerText; } } </script> <input type="text" name="show" value="do">
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

javascript键盘事件全面控制脚本代码 JavaScript容错例外处理

评论 (0) All

登陆 还没注册？

设为首页 | 加入收藏 | 关于我们 | 联系我们 | 广告服务 | 网站地图 | 友情链接 | 在线帮助 | 免责声明 Sitemap W3school

如果您觉得本站不错，别忘了告诉您的同学和同事哟 ^_^

欢迎各网站转载我们的原创，转载时请注明出处。

All copyright is reserved by 软晨网（RuanChen.com）