利用JS來(lái)控制鍵盤的上下左右鍵(示例代碼)
這是一個(gè)JS初級(jí)代碼,想學(xué)JS的朋友,可以研究下或者擴(kuò)展下,最好能用JS實(shí)現(xiàn)整個(gè)鍵盤的控制,那感覺(jué)就很有意思了。
具體代碼如下:
<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 彈出虛擬鍵盤修改密碼的簡(jiǎn)單實(shí)例
- js獲取及判斷鍵盤按鍵的方法
- js監(jiān)聽(tīng)鼠標(biāo)點(diǎn)擊和鍵盤點(diǎn)擊事件并自動(dòng)跳轉(zhuǎn)頁(yè)面
- javascript 鍵盤事件總結(jié) 推薦
- js監(jiān)聽(tīng)鍵盤事件示例代碼
- js獲取鍵盤按鍵響應(yīng)事件(兼容各瀏覽器)
- js和jquery實(shí)現(xiàn)監(jiān)聽(tīng)鍵盤事件示例代碼
- js捕捉鍵盤事件和按鍵鍵值的方法
- js 鍵盤記錄實(shí)現(xiàn)(兼容FireFox和IE)
- JS實(shí)現(xiàn)電腦虛擬鍵盤的操作
相關(guān)文章
js+HTML5 canvas 實(shí)現(xiàn)簡(jiǎn)單的加載條(進(jìn)度條)功能示例
這篇文章主要介紹了js+HTML5 canvas 實(shí)現(xiàn)簡(jiǎn)單的加載條(進(jìn)度條)功能,涉及javascript使用時(shí)間函數(shù)與canvas繪圖結(jié)合實(shí)現(xiàn)進(jìn)度條的相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
前端實(shí)現(xiàn)文本對(duì)比并高亮顯示差異的方法
文本對(duì)比是一個(gè)常見(jiàn)需求,尤其在版本控制和代碼編輯中,本文介紹了如何使用jsdiff庫(kù)和diff2html工具來(lái)實(shí)現(xiàn)文本內(nèi)容的差異比較和美化顯示,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
通過(guò)微信公眾平臺(tái)獲取公眾號(hào)文章的方法示例
這篇文章主要介紹了通過(guò)微信公眾平臺(tái)獲取公眾號(hào)文章的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
使用JS動(dòng)態(tài)構(gòu)建目錄樹(shù)
本文詳細(xì)講解了使用JS動(dòng)態(tài)構(gòu)建目錄樹(shù)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-01-01
JavaScript Map實(shí)現(xiàn)原理與底層結(jié)構(gòu)詳解
哈希表(也稱為哈希表)是一種基于鍵直接訪問(wèn)內(nèi)存存儲(chǔ)位置的數(shù)據(jù)結(jié)構(gòu)。也就是說(shuō),它通過(guò)計(jì)算一個(gè)鍵值函數(shù)來(lái)加速查找,該函數(shù)將要查詢的數(shù)據(jù)映射到表中的某個(gè)位置。該映射函數(shù)稱為散列函數(shù),記錄數(shù)組稱為散列表2022-09-09
微信jssdk在iframe頁(yè)面失效問(wèn)題的解決措施
這篇文章主要介紹了微信jssdk在iframe頁(yè)面失效問(wèn)題的解決措施 的相關(guān)資料,需要的朋友可以參考下2016-03-03
微信小程序 bindtap 事件多參數(shù)傳遞的代碼示例
在微信小程序中,我們無(wú)法直接通過(guò) bindtap="handleClick(1,2,3)" 的方式傳遞參數(shù),而是通過(guò)自定義屬性data- 的方式傳遞,并在事件回調(diào)函數(shù)中通過(guò)event.currentTarget.dataset獲取這些參數(shù),本文給大家介紹小程序 bindtap 事件多參數(shù)傳遞的實(shí)例代碼,感興趣的朋友一起看看吧2023-12-12
Javascript中的this,bind和that使用實(shí)例
這篇文章主要介紹了Javascript中的this,bind和that使用實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12

