• 在表格中按上下左右键移动光标


    //将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; }}
  • 相关阅读:
    Android开发之旅1:环境搭建及HelloWorld
    程序员学习视频教程汇总
    Maven项目下update maven后Eclipse报错:java.lang.ClassNotFoundException: ContextLoaderL
    查看控制层从前端传来的参数
    PostMethod和GetMethod用法
    @Transient的用法和格式化页面展示的数据格式
    修改hosts
    javascript:history.go(-1)的使用
    JsonConfig的jsonConfig.setExcludes的用法
    验证登录超时,在登录后跳转超时时的页面
  • 原文地址:https://www.cnblogs.com/rey888/p/10333062.html
Copyright © 2020-2023  润新知