• 技术文章 >web前端 >js教程

    js 上下左右键控制焦点(示例代码)_javascript技巧

    2016-05-16 17:09:14原创494
    如下所示:
    复制代码 代码如下:

    //begin---------------上下左右键控制

    if('${iscontrol_mchntid}'.indexOf('${mchntid}')!=-1){

    var texts = new Array();
    //设置为focus所在的location
    var x = 2;
    var y = 3;
    var maxx = 0;
    var maxy = 0;
    window.onload=function(){
    var inputs = $("[location]");
    for(var i = 0; i < inputs.length; i++){
    texts.push(inputs[i]);
    }
    for(var i = 0; i < texts.length; i++){
    texts[i].onfocus = new Function("setCurrent('" + texts[i].getAttribute("location") + "')");
    var crtx = parseInt(texts[i].getAttribute("location").split(",")[0]);
    var crty = parseInt(texts[i].getAttribute("location").split(",")[1]);
    maxx = maxx < crtx ? crtx : maxx;
    maxy = maxy < crty ? crty : maxy;
    texts[i].onkeydown = function(e){
    e = e || window.event;
    switch(e.keyCode){
    case 38:setPosition(x,y,38);break;// 上
    case 40:setPosition(x,y,40);break;// 下
    case 37:setPosition(x,y,37);break;// 左
    case 39:setPosition(x,y,39);break;// 右
    case 45:setPosition(x,y,45);break; // Insert键/返回键 在输入框里是删除且输入库有值时是删除 其他为返回上一页
    default:return true;
    }
    };
    }
    };
    function setPosition(x,y,keyCode){

    //此处加入动态改变位置的逻辑----begin
    //上下时,只改动y坐标,x坐标自动改变
    //左右时,只改动x坐标,y坐标自动改变
    if(keyCode == '38' && x == '3'){
    if(y=='3'||y=='4'||y=='5'||y=='6'||y=='7'||y=='8'){
    y='3';
    }
    }
    if(keyCode == '40' && x == '4'){
    if(y=='3'||y=='4'||y=='5'||y=='6'||y=='7'||y=='8'){
    y='3';
    }
    }
    //此处加入动态改变位置的逻辑----end

    if(keyCode == '38'){
    x = --x;
    }
    if(keyCode == '40'){
    x = ++x;
    }
    if(keyCode == '37'){
    y = --y;
    }
    if(keyCode == '39'){
    y = ++y;
    }
    movePosition(x,y,keyCode);
    }
    function movePosition(x1,y1,keyCode){
    if(keyCode == '45'){
    //光标所在的对象是input时
    var st = x1+","+y1;
    if($("input[location='"+st+"']").attr("type")=="text"){
    var oldval = $("input[location='"+st+"']").val();
    var newval = oldval.substring(0,oldval.length-1);
    $("input[location='"+st+"']").val(newval);
    return false;
    }else{
    history.go(-1);
    return false;
    }
    }
    x1 = x1 > maxx ? 1 : x1;
    y1 = y1 > maxy ? 1 : y1;
    x1 = x1 < 1 ? maxx : x1;
    y1 = y1 < 1 ? maxy : y1;

    var j = 0;
    for(; j < texts.length; j++){
    if(texts[j].getAttribute("location") == x1 + "," + y1){
    texts[j].focus();
    break;
    }
    }
    if(j == texts.length){
    switch(keyCode){
    case 38:movePosition(--x1,y1,keyCode);break;// 上
    case 40:movePosition(++x1,y1,keyCode);break;// 下
    case 37:movePosition(x1,--y1,keyCode);break;// 左
    case 39:movePosition(x1,++y1,keyCode);break;// 右
    }
    }
    }
    function setCurrent(location){
    x = location.split(",")[0];
    y = location.split(",")[1];
    }
    }
    //end---------------上下左右键控制

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:window.print打印指定div实例代码_javascript技巧 下一篇:同域jQuery(跨)iframe操作DOM(示例代码)_jquery
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• JavaScript字典与集合(总结分享)• 怎么利用node生成word文档?使用库分享• 深入理解JavaScript内存管理和GC算法• 怎么使用pkg将Node.js项目打包为可执行文件?• 详细介绍JavaScript二叉树及各种遍历算法
    1/1

    PHP中文网