微立顶科技

新闻资讯

创新 服务 价值

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

发布日期:2023/4/7 16:06:38      浏览量:

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


具体代码如下:


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>JS方向键切换输入框焦点</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. </head>
  8. <body>
  9. <table border="1" id="mm" onkeydown="keyDown(event)">
  10. <tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr>
  11. <tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr>
  12. <tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr>
  13. <tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr>
  14. <tr> <td> <input> </td> <td> <input> </td> <td> <input> </td> <td> <input> </td> </tr>
  15. </table>
  16. <script language="javascript" type="text/javascript">
  17. <!--
  18. var inputs=document.getElementById("mm").getElementsByTagName("INPUT");
  19. function keyDown(event)
  20. {
  21. var focus=document.activeElement;
  22. if(!document.getElementById("mm").contains(focus)) return;
  23. var event=window.event||event;
  24. var key=event.keyCode;
  25. for(var i=0; i<inputs.length; i++)
  26. {
  27. if(inputs[i]===focus) break;
  28. }
  29. switch(key)
  30. {
  31. case 37:
  32. if(i>0) inputs[i-1].focus();
  33. break;
  34. case 38:
  35. if(i-4>=0) inputs[i-4].focus();
  36. break;
  37. case 39:
  38. if(i<inputs.length-1) inputs[i+1].focus();
  39. break;
  40. case 40:
  41. if(i+4 <inputs.length) inputs[i+4].focus();
  42. break;
  43. }
  44. }
  45. //-->
  46. </script>
  47. </body>
  48. </html>



  业务实施流程

需求调研 →

团队组建和动员 →

数据初始化 →

调试完善 →

解决方案和选型 →

硬件网络部署 →

系统部署试运行 →

系统正式上线 →

合作协议

系统开发/整合

制作文档和员工培训

售后服务

马上咨询: 如果您有业务方面的问题或者需求,欢迎您咨询!我们带来的不仅仅是技术,还有行业经验积累。
QQ: 39764417/308460098     Phone: 13 9800 1 9844 / 135 6887 9550     联系人:石先生/雷先生