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

本文实例讲述了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程序设计有所帮助。