亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS實(shí)現(xiàn)方向鍵切換輸入框焦點(diǎn)的方法

 更新時(shí)間:2015年08月19日 10:45:04   作者:企鵝  
這篇文章主要介紹了JS實(shí)現(xiàn)方向鍵切換輸入框焦點(diǎn)的方法,涉及javascript鼠標(biāo)事件及頁(yè)面元素焦點(diǎn)的切換實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)方向鍵切換輸入框焦點(diǎn)的方法。分享給大家供大家參考。具體如下:

這里實(shí)現(xiàn)js方向鍵控制切換輸入框焦點(diǎn)效果,不過(guò)無(wú)法兼容Firefox。當(dāng)輸入完畢按回車(chē)或按方向鍵可移動(dòng)焦點(diǎn)至想要輸入的文本框內(nèi),無(wú)需點(diǎn)擊鼠標(biāo),對(duì)于經(jīng)常錄入數(shù)據(jù)的時(shí)候,這種功能可提高輸入速度。

運(yùn)行效果截圖如下:

在線(xiàn)演示地址如下:

http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/

具體代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS方向鍵切換輸入框焦點(diǎn)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table border="1" id="mm" onkeydown="keyDown(event)"> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
<tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr> 
</table> 
<script language="javascript" type="text/javascript"> 
<!-- 
var inputs=document.getElementById("mm").getElementsByTagName("INPUT"); 
function keyDown(event) 
{ 
 var focus=document.activeElement; 
 if(!document.getElementById("mm").contains(focus)) return; 
 var event=window.event||event;
 var key=event.keyCode; 
 for(var i=0; i<inputs.length; i++) 
 { 
  if(inputs[i]===focus) break; 
 } 
 switch(key) 
 { 
  case 37: 
   if(i>0) inputs[i-1].focus(); 
   break; 
  case 38: 
   if(i-4>=0) inputs[i-4].focus(); 
   break; 
  case 39: 
   if(i<inputs.length-1) inputs[i+1].focus(); 
   break; 
  case 40: 
   if(i+4 <inputs.length) inputs[i+4].focus(); 
   break; 
 } 
} 
//--> 
</script> 
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • 微信小程序?qū)崿F(xiàn)錨點(diǎn)功能

    微信小程序?qū)崿F(xiàn)錨點(diǎn)功能

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)錨點(diǎn)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-11-11
  • JavaScript控制Session操作方法

    JavaScript控制Session操作方法

    JavaScript代表客戶(hù)端,而Session代表的是服務(wù)器(不知道這樣說(shuō)大家是否能夠理解)接下來(lái)介紹JavaScript如何控制Session,感興趣的朋友可以了解下啊
    2013-01-01
  • KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流with綁定

    KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流with綁定

    這篇文章主要介紹了KnockoutJS 3.X API 第四章之?dāng)?shù)據(jù)控制流with綁定的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-10-10
  • 微信小程序 頁(yè)面跳轉(zhuǎn)傳值實(shí)現(xiàn)代碼

    微信小程序 頁(yè)面跳轉(zhuǎn)傳值實(shí)現(xiàn)代碼

    這篇文章主要介紹了微信小程序 頁(yè)面跳轉(zhuǎn)傳值實(shí)現(xiàn)代碼的相關(guān)資料,這里分析實(shí)現(xiàn)的條件及實(shí)例代碼,需要的朋友可以參考下
    2017-07-07
  • 拖動(dòng)層效果,兼容IE和FF!

    拖動(dòng)層效果,兼容IE和FF!

    拖動(dòng)層效果,兼容IE和FF!...
    2006-11-11
  • IE下通過(guò)JS控制剪貼板的代碼

    IE下通過(guò)JS控制剪貼板的代碼

    javascript可以輕松操作客戶(hù)端剪貼板內(nèi)容,不過(guò)只適用IE5以上瀏覽器
    2009-08-08
  • JavaScript的遞歸之遞歸與循環(huán)示例介紹

    JavaScript的遞歸之遞歸與循環(huán)示例介紹

    對(duì)于不同類(lèi)型的需要重復(fù)計(jì)算的問(wèn)題,循環(huán)和遞歸兩種方法各有所長(zhǎng),能給出更直觀(guān)簡(jiǎn)單的方案,下面為大家詳細(xì)的介紹下JavaScript的遞歸與循環(huán),感興趣的朋友可以了解下
    2013-08-08
  • js在瀏覽器中的event loop事件隊(duì)列示例詳解

    js在瀏覽器中的event loop事件隊(duì)列示例詳解

    大家都知道js是單線(xiàn)程的腳本語(yǔ)言,在同一時(shí)間只能做同一件事,為了協(xié)調(diào)事件、用戶(hù)交互、腳本、UI渲染和網(wǎng)絡(luò)處理等行為,防止主線(xiàn)程阻塞,Event Loop方案應(yīng)運(yùn)而生,這篇文章主要給大家介紹了關(guān)于js在瀏覽器中的event loop事件隊(duì)列的相關(guān)資料,需要的朋友可以參考下
    2021-11-11
  • JavaScript 解析數(shù)學(xué)表達(dá)式的過(guò)程詳解

    JavaScript 解析數(shù)學(xué)表達(dá)式的過(guò)程詳解

    這篇文章主要介紹了JavaScript 解析數(shù)學(xué)表達(dá)式的過(guò)程詳解,本文以一個(gè)的解題思路,來(lái)分享如何解決問(wèn)題,解決的過(guò)程,可以作為解決工作中一般問(wèn)題的通用思路,對(duì)js解析表達(dá)式相關(guān)知識(shí)感興趣的朋友一起看看吧
    2022-06-06
  • 微信小程序左右滑動(dòng)刪除事件詳解

    微信小程序左右滑動(dòng)刪除事件詳解

    這篇文章主要為大家詳細(xì)介紹了微信小程序左右滑動(dòng)刪除事件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-06-06

最新評(píng)論