zoukankan      html  css  js  c++  java
  • 在表格中按上下左右键移动光标

    //将input中加入属性data-col='x-y'
    function getXy(el){
    if(el != null&&el.length != 0 && el.attr("data-col")!= null){
    var attr = el.attr("data-col");
    var temp = attr.split("-");
    var arr = [];
    arr.push(parseInt(temp[0]));
    arr.push(parseInt(temp[1]));
    return arr;
    }
    return [1,4];
    }
    function isMove(el){
    var isReadonly = el.attr("readonly");
    var isDisabled = el.attr("disabled");
    var isHide = el.parent().parent().css("display");
    return isReadonly=="readonly"||isDisabled=="disabled"||"none"==isHide;
    }
    function moveLeft(row,line){
    if(line <= 1){
    return
    }
    var el = $("input[data-col='"+row+"-"+(--line)+"']");
    console.log(el);
    if(isMove(el)){//如果选中元素是readonly或者disabled=true则减少一位继续使用此方法发
    moveLeft(row,line);
    return;
    }
    el.focus();
    }
    function moveRight(row,line){
    if(line >= 13){
    return
    }
    var el = $("input[data-col='"+row+"-"+(++line)+"']");
    console.log(el);
    if(isMove(el)){//如果选中元素是readonly或者disabled=true则减少一位继续使用此方法发
    moveRight(row,line);
    return;
    }
    el.focus();
    }
    function moveTop(row,line){
    if(row <= 1){
    return
    }
    var el = $("input[data-col='"+(--row)+"-"+(line)+"']");
    console.log(el);
    if(isMove(el)){//如果选中元素是readonly或者disabled=true则减少一位继续使用此方法发
    moveTop(row,line);
    return
    }
    el.focus();
    }
    function moveDown(row,line){
    var max = $("#tbodyMx").find("tr").length;
    if(row >= max){
    return
    }
    var el = $("input[data-col='"+(++row)+"-"+(line)+"']");
    console.log(el);
    if(isMove(el)){//如果选中元素是readonly或者disabled=true则减少一位继续使用此方法发
    moveDown(row,line);
    return
    }
    el.focus();
    }
    document.onkeydown=function(e){
    var e=window.event||e;
    if(e.keyCode!= 37&&e.keyCode!= 38&&e.keyCode!= 39&&e.keyCode!= 40){
    return;
    }
    var el = $("input:focus");

    if(el==null || el.length == 0 || el.attr("data-col")==null){
    $("[data-col='1-4']").focus();
        return;
    } //根据光标所在的元素获得一个两位长度的数组,第一个是行,第二个是列,如果光标不存在元素或者元素不是指定元素则光标默认到第一个元素上面 var arr = getXy(el); var row = arr[0]; var line = arr[1]; if(line == 2||line == 1||line==3||line==4){ $("#spmx").scrollLeft(0); } switch(e.keyCode){ case 37: //左 //如果列为0,则无需变动光标位置,否则找到列比本元素的列小一个的位置 moveLeft(row,line); break; case 38: //上 //如果行为0则无需变动,否则移动到比当前行少一位的位置 moveTop(row,line); break; case 39: //右 //如果列为最大值则不需变动,否则向右移动一个位置 moveRight(row,line); break; case 40: //下 //如果行为最大值则无需变动,否则向下移动一个位置 moveDown(row,line); break; }}
  • 相关阅读:
    Matlab P文件——加快Matlab程序,保护你的算法
    电烙铁的使用
    CV、PR方向的资源
    遗传算法初接触
    Linux进程控制
    C语言编程优化运行速度
    用MATLAB优化工具箱解线性规划
    50、linux shell命令,netstat,traceroute
    51、linux shell命令,route,ifconfig
    56、vi常见用法,多窗口模式,标记,多文件编辑,快捷操作及设置
  • 原文地址:https://www.cnblogs.com/rey888/p/10333062.html
Copyright © 2011-2022 走看看