JS實現方向鍵切換輸入框焦點的方法

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS實現方向鍵切換輸入框焦點的方法

JS實現方向鍵切換輸入框焦點的方法

編輯：關於JavaScript

本文實例講述了JS實現方向鍵切換輸入框焦點的方法。分享給大家供大家參考。具體如下：

這裡實現js方向鍵控制切換輸入框焦點效果，不過無法兼容Firefox。當輸入完畢按回車或按方向鍵可移動焦點至想要輸入的文本框內，無需點擊鼠標，對於經常錄入數據的時候，這種功能可提高輸入速度。

運行效果截圖如下：

在線演示地址如下：

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方向鍵切換輸入框焦點</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>

希望本文所述對大家的javascript程序設計有所幫助。

關於JavaScript

js動態切換圖片的方法教程: 本文實例講述了js動態切換圖片的方法。分享給大家供大家參考。具體實現方法如下：index.css文件
JavaScript中的閉包(Closure)詳細介紹: 閉包是JavaScript中一個重要的特性，其最大的作用在於保存函數運行過程中的信息。在JavaSc
javascript重復綁定事件造成的後果說明: 最近在修改百度地圖開源的東西，想把裡面耦合在一起的代碼給拆分出來。拆解之後，發現了一些坑爹的問題。邏

DIV CSS 佈局教程網

相關文章