利用JS來(lái)控制鍵盤(pán)的上下左右鍵(示例代碼)
更新時(shí)間:2013年12月14日 09:01:46 作者:
這篇文章主要介紹了利用JS來(lái)控制鍵盤(pán)的上下左右鍵示例代碼。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
這是一個(gè)JS初級(jí)代碼,想學(xué)JS的朋友,可以研究下或者擴(kuò)展下,最好能用JS實(shí)現(xiàn)整個(gè)鍵盤(pán)的控制,那感覺(jué)就很有意思了。
具體代碼如下:
復(fù)制代碼 代碼如下:
<style>
tr.highlight{background:#08246B;color:white;}
</style>
<table border="1" width="70%" id="ice">
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
<tr>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
<td><input type='text'></td>
</tr>
</table>
<script language="javascript">
<!--
//定義初始化行列
var currentLine=-1;
var currentCol=-1;
document.onkeydown=function(e){
e=window.event||e;
switch(e.keyCode){
case 37: //左鍵
currentCol--;
changeItem();
break;
case 38: //向上鍵
currentLine--;
changeItem();
break;
case 39: //右鍵
currentCol++;
changeItem();
break;
case 40: //向下鍵
currentLine++;
changeItem();
break;
default:
break;
}
}
//方向鍵調(diào)用
function changeItem(){
if(document.all)
var it=document.getElementByIdx_x("ice").children[0];
else
var it=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;
}
var objtab=document.all.ice;
var objrow=objtab.rows[currentLine].getElementsByTagName_r("INPUT");
if(currentCol<0){
currentCol=objrow.length-1;
}else if(currentCol==objrow.length){
currentCol=0;
}
objrow[currentCol].select();
//調(diào)試使用
it.rows[currentLine].className="highlight";
}
//-->
</script>
您可能感興趣的文章:
- js 彈出虛擬鍵盤(pán)修改密碼的簡(jiǎn)單實(shí)例
- js獲取及判斷鍵盤(pán)按鍵的方法
- js監(jiān)聽(tīng)鼠標(biāo)點(diǎn)擊和鍵盤(pán)點(diǎn)擊事件并自動(dòng)跳轉(zhuǎn)頁(yè)面
- javascript 鍵盤(pán)事件總結(jié) 推薦
- js監(jiān)聽(tīng)鍵盤(pán)事件示例代碼
- js獲取鍵盤(pán)按鍵響應(yīng)事件(兼容各瀏覽器)
- js和jquery實(shí)現(xiàn)監(jiān)聽(tīng)鍵盤(pán)事件示例代碼
- js捕捉鍵盤(pán)事件和按鍵鍵值的方法
- js 鍵盤(pán)記錄實(shí)現(xiàn)(兼容FireFox和IE)
- JS實(shí)現(xiàn)電腦虛擬鍵盤(pán)的操作
相關(guān)文章
JS+CSS實(shí)現(xiàn)可拖拽的漂亮圓角特效彈出層完整實(shí)例
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)可拖拽的漂亮圓角特效彈出層,以完整實(shí)例形式分析了彈出層特效及圓角矩形的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-02-02tsc性能優(yōu)化Project References使用詳解
這篇文章主要為大家介紹了tsc性能優(yōu)化Project References使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11js/jquery解析json和數(shù)組格式的方法詳解
本篇文章主要是對(duì)js/jquery解析json和數(shù)組格式的方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種方法小結(jié)
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的幾種方法小結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2016-05-05js中如何對(duì)json數(shù)組進(jìn)行排序
這篇文章主要介紹了js中如何對(duì)json數(shù)組進(jìn)行排序的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04