利用JS来控制键盘的上下左右键(示例代码)
2023-06-13 09:15:14 时间
这是一个JS初级代码,想学JS的朋友,可以研究下或者扩展下,最好能用JS实现整个键盘的控制,那感觉就很有意思了。
具体代码如下:
<style>
tr.highlight{background:#08246B;color:white;}
</style>
<tableborder="1"width="70%"id="ice">
<tr>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
</tr>
<tr>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
</tr>
<tr>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
</tr>
<tr>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
</tr>
<tr>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
<td><inputtype="text"></td>
</tr>
</table>
<scriptlanguage="javascript">
<!--
//定义初始化行列
varcurrentLine=-1;
varcurrentCol=-1;
document.onkeydown=function(e){
e=window.event||e;
switch(e.keyCode){
case37://左键
currentCol--;
changeItem();
break;
case38://向上键
currentLine--;
changeItem();
break;
case39://右键
currentCol++;
changeItem();
break;
case40://向下键
currentLine++;
changeItem();
break;
default:
break;
}
}
//方向键调用
functionchangeItem(){
if(document.all)
varit=document.getElementByIdx_x("ice").children[0];
else
varit=document.getElementByIdx_x("ice");
for(i=0;i<it.rows.length;i++){
it.rows[i].className="";
}
if(currentLine<0){
currentLine=it.rows.length-1;
}
if(currentLine==it.rows.length){
currentLine=0;
}
varobjtab=document.all.ice;
varobjrow=objtab.rows[currentLine].getElementsByTagName_r("INPUT");
if(currentCol<0){
currentCol=objrow.length-1;
}elseif(currentCol==objrow.length){
currentCol=0;
}
objrow[currentCol].select();
//调试使用
it.rows[currentLine].className="highlight";
}
//-->
</script>
相关文章
- JS跳转代码_js中跳转页面路径
- Js生成二维码_js在线生成二维码
- 重学JS-6-一图掌握解构赋值
- js控制文本框只能输入中文、英文、数字与指定特殊符号详解编程语言
- Linux上的JS压缩工具(js压缩工具linux)
- 使用JS实现Redis数据读取(js读取redis)
- JS将文件传输至MySQL数据库(.js传文件至mysql)
- 用JS控制表格的逐行变色的表单
- js进度条实现代码
- Js控制表单域代码
- js实现的仿Photoshop鼠标滚轮控制输入框取值(修正兼容Chrome)
- 用JS控制回车事件的代码
- js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
- JS控制小数位数的实现代码
- js控制的回到页面顶端goTop的代码实现
- js控制滚动条缓慢滚动到顶部实现代码
- js得到文件后缀(通过正则实现)
- 使用js正则控制input标签只允许输入的值
- JS控制阿拉伯数字转为中文大写示例代码
- js控制淡入淡出示例代码
- 一个js控制的导航菜单实例代码
- js获取url参数代码实例分享(JS操作URL)
- js鼠标及对象坐标控制属性详细解析
- js控制浏览器全屏示例代码
- js控制iframe的高度/宽度让其自适应内容
- Js实现网页键盘控制翻页的方法
- js函数内变量的作用域分析
- js图片闪动特效可以控制间隔时间如几分钟闪动一下