zoukankan      html  css  js  c++  java
  • 键盘事件

    今天拿到一个需求,需要实现在table中上下左右获取文本框,如exl

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
        *{ margin:0px; padding:0px; font-size:20px;}
        td{width:200px;height:25px;}
        .tdNone{border:none;width:100px; }
        input{width:200px;height:25px;}
    </style>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(function(){
                //alert("window!");
                var id;
                var jqID;
                $("input").keydown(function(event){ 
                    id=$(this).attr("id");
                    jqID=id.split("");
                        if(event.which || event.keyCode){
                            if((event.which==37)||(event.keyCode == 37)){//左键37
                                    //alert(id+"---"+jqID[0]+"---"+jqID[1]);
                                        $("#"+jqID[0]+(jqID[1]-1)).focus();//左边的input获取焦点  //alert("#"+jqID[0]+(jqID[1]-1));
                            }
                            if((event.which==38)||(event.keyCode == 38)){//上键38
                                    //alert(id+"---"+jqID[0]+"---"+jqID[1]);
                                        $("#"+(jqID[0]-1)+jqID[1]).focus();//上边的input获取焦点  //alert("#"+jqID[0]+(jqID[1]-1));
                            }
                            if((event.which==39)||(event.keyCode == 39)){//右键39
                                    //alert(id+"---"+jqID[0]+"---"+(jqID[1]+1));
                                        $("#"+jqID[0]+(Number(jqID[1])+1)).focus();//上边的input获取焦点  //alert("#"+jqID[0]+(jqID[1]-1));
                            }
                            if((event.which==40)||(event.keyCode == 40)){//下键40
                                    //alert(id+"---"+(jqID[0]+1)+"---"+jqID[1]);
                                        $("#"+(Number(jqID[0])+1)+jqID[1]).focus();//上边的input获取焦点  //alert("#"+jqID[0]+(jqID[1]-1));
                            }
                        }
                  });
            })
    
    
    </script>
    </head>
    
    <body>
        <table border="1" cellpadding="5" cellspacing="50">
            <tr>
                <td class="tdNone"></td>
                <td>名称1</td>
                <td>名称2</td>
                <td>名称3</td>
                <td>名称4</td>
            </tr>
            <tr>
                <td class="tdNone">模特1</td>
                <td><input id="11"/></td>
                <td><input id="12" /></td>
                <td><input id="13"/></td>
                <td><input id="14"/></td>
            </tr>
            <tr>
                <td class="tdNone">模特2</td>
                <td><input id="21"/></td>
                <td><input id="22"/></td>
                <td><input id="23"/></td>
                <td><input id="24"/></td>
            </tr>
            <tr>
                <td class="tdNone">模特2</td>
                <td><input id="31"/></td>
                <td><input id="32"/></td>
                <td><input id="33"/></td>
                <td><input id="34"/></td>
            </tr>
            <tr>
                <td class="tdNone">模特2</td>
                <td><input id="41"/></td>
                <td><input id="42"/></td>
                <td><input id="43"/></td>
                <td><input id="44"/></td>
            </tr>
        </table>
    </body>
  • 相关阅读:
    图解插入排序
    图解冒泡排序
    break 和continue的两种用法
    循环的使用选择
    jstl标签库使用报错index_jsp.java找不到问题
    [Android 除錯] Conflict with dependency
    jQueryMobile 網頁使用 ASP.NET Web API 服務
    Chart.js 與 ASP.NET MVC 整合應用
    HTML5 新增的 input 事件
    ASP.NET MVC 5 實作 GridView 分頁
  • 原文地址:https://www.cnblogs.com/mytzq/p/4791909.html
Copyright © 2011-2022 走看看