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
  • 相关阅读:
    PHP 5.5.0 Alpha5 发布
    Ubuntu Touch 只是另一个 Android 皮肤?
    MariaDB 10 已经为动态列提供文档说明
    Percona Toolkit 2.1.9 发布,MySQL 管理工具
    Oracle Linux 6.4 发布
    Ruby 2.0.0 首个稳定版本(p0)发布
    Apache Pig 0.11.0 发布,大规模数据分析
    Node.js 0.8.21 稳定版发布
    红薯 MySQL 5.5 和 5.6 默认参数值的差异
    Django 1.5 正式版发布,支持 Python 3
  • 原文地址:https://www.cnblogs.com/shiningrise/p/780321.html
Copyright © 2011-2022 走看看