JS实现方向键切换输入框焦点的方法

本文实例讲述了JS实现方向键切换输入框焦点的方法。分享给大家供大家参考。具体如下：

这里实现js方向键控制切换输入框焦点效果，不过无法兼容Firefox。当输入完毕按回车或按方向键可移动焦点至想要输入的文本框内，无需点击鼠标，对于经常录入数据的时候，这种功能可提高输入速度。

运行效果截图如下：

具体代码如下：

<!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程序设计有所帮助。