发布日期:2023/4/7 16:06:38 浏览量:
实现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>
业务实施流程
需求调研 →
团队组建和动员 →
数据初始化 →
调试完善 →
解决方案和选型 →
硬件网络部署 →
系统部署试运行 →
系统正式上线 →
合作协议
系统开发/整合
制作文档和员工培训
售后服务
马上咨询: 如果您有业务方面的问题或者需求,欢迎您咨询!我们带来的不仅仅是技术,还有行业经验积累。
QQ: 39764417/308460098 Phone: 13 9800 1 9844 / 135 6887 9550 联系人:石先生/雷先生