本文實例講述了JS實現(xiàn)方向鍵切換輸入框焦點的方法。分享給大家供大家參考。具體如下：
這里實現(xiàn)js方向鍵控制切換輸入框焦點效果，不過無法兼容Firefox。當輸入完畢按回車或按方向鍵可移動焦點至想要輸入的文本框內(nèi)，無需點擊鼠標，對于經(jīng)常錄入數(shù)據(jù)的時候，這種功能可提高輸入速度。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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程序設(shè)計有所幫助。
新聞熱點
疑難解答
