利用键盘上的上下左右（回车）键模拟出tab 键的功能上下左右移动焦点

zoukankan html css js c++ java

利用键盘上的上下左右（回车）键模拟出tab 键的功能上下左右移动焦点

<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=gb2312">
<script language="JavaScript">
var cols=3;
var obj;
var CanMove=false;
var key;
function setobj(input){
     obj=input;
}

function init(){
     document.onkeydown=keyDown;
     document.onkeyup=keyUp;
}

function keyDown(DnEvents){
     var key=window.event.keyCode;
     if(key==116){
         window.event.keyCode=0;
         return false;
     }
     if(key==8){
         if(event.srcElement.tagName!="INPUT"){
             event.cancelBubble = true;
             event.returnValue = false;
             return false;
         }
     }
      //此处为按下ctrl   注释此处可以实现不需要ctrl
     var IsCtrl=window.event.ctrlKey;
     if(!IsCtrl){
         return;
     }
     for(var i=0;i<document.forms[0].elements.length;i++){
         if(document.forms[0].elements[i]==obj){
             if (key == 37){//←
                 if(i>0){
                     document.forms[0].elements[i-1].focus();
                 }
             }
             if (key == 38){//↑
                 if(i>cols-1){
                     document.forms[0].elements[i-cols].focus();
                 }
             }
             if (key == 39){//→
                 if(i<document.forms[0].elements.length-1){
                     document.forms[0].elements[i+1].focus();
                 }
             }

                   if (key == 13)
                   {//→
                                     event.keyCode = 9;
                    }
             if (key == 40){//↓
                 if(i<document.forms[0].elements.length-cols){
                     document.forms[0].elements[i+cols].focus();
                 }
             }
         }
     }

}

function keyUp(UpEvents){
     return false;
}
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000" onload="init()">
<form>
<table border="0" cellspacing="0" cellpadding="0" align="center">
   <tr>
     <td>
       <input type="text" name="textfield" onfocus="setobj(this)">
     </td>
     <td>
       <input type="text" name="textfield2" onfocus="setobj(this)">
     </td>
     <td>
       <input type="text" name="textfield3" onfocus="setobj(this)">
     </td>
   </tr>
   <tr>
     <td>
       <input type="text" name="textfield5" onfocus="setobj(this)">
     </td>
     <td>
       <input type="text" name="textfield6" onfocus="setobj(this)">
     </td>
     <td>
       <input type="text" name="textfield7" onfocus="setobj(this)">
     </td>
   </tr>
</table>
<a href="#" onfocus="setobj(this)">ffff</a>
</form>
用Ctrl+方向键可以方便的在控件中移动，也可以不要Ctrl的。
</body>
</HTML>
转自：http://hi.baidu.com/hyg2006/blog/item/853302d578f9bac550da4b04.html

欢迎光临:http://shiningrise.cnblogs.com

查看全文

相关阅读:
Flask目录结构
 RHSA-2019:1880-低危: curl 安全和BUG修复更新及 RHSA-2019:1884-中危: libssh2 安全更新
 ELK+Logback进行业务日志分析查看
 Maven编译过程中出现的问题
 Zabbix监控服务器磁盘I/O
创建readonly只读用户脚本
 Zabbix监控多个JVM进程
 redis命令
 docker配置Nginx
docker基本命令

原文地址：https://www.cnblogs.com/shiningrise/p/780321.html