邪恶的web上下键焦点移动

最近在搞web快捷键。总结了一些方法,我这个方法主要是给每个要活的焦点的控件给tabindex值,然后通过jquery去找具有tabindex属性的控件,利用tabindex值来寻找上下控件。

下面是引用的js

代码
var obj;
var key;
var tabindex;
var pTabIndex;
function MoveFocus(input) {
    obj 
= input;
}

function init() {
    document.onkeydown 
= keyDown;
    document.onkeyup 
= keyUp;
}
function keyDown(DnEvents) {
    
var evt = getEvent();
    
var key = evt.keyCode || evt.which;
    
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;
        }
    }

    
if (key == 37) {//

    }
    
if (key == 38) {//
        if (obj != null) {
            tabindex 
= obj.tabIndex;
            
//如果前一次所在的文本框和这一次的一样,则需要加2
            if (tabindex == pTabIndex) {
                tabindex 
= tabindex - 2;
            }
            
else {
                tabindex 
= tabindex - 1;
            }
            setfoucs(tabindex);
            pTabIndex 
= tabindex + 1;

        }
    }
    
if (key == 39) {//

    }

    
if (key == 13) {//
        //event.keyCode = 9;
    }
    
if (key == 40) {//
        if (obj != null) {
            tabindex 
= obj.tabIndex;
            
//如果前一次所在的文本框和这一次的一样,则需要加2
            if (tabindex == pTabIndex) {
                tabindex 
= tabindex + 2;
            }
            
else {
                tabindex 
= tabindex + 1;
            }
            setfoucs(tabindex);
            pTabIndex 
= tabindex - 1;
        }
    }
}

function keyUp(UpEvents) {
    
return false;
}

//通过tabindex值找到指定的文本框
function setfoucs(tabindex) {
    
if (tabindex != 0 && tabindex != "") {
        
try {
            $(
"input[tabindex=" + tabindex + "]").focus();
            
if ($.browser.mozilla) {
                window.setTimeout(
function() { $("input[tabindex=" + tabindex + "]").focus(); $("input[tabindex=" + tabindex + "]").select(); }, 0);
            }
            $(
"input[tabindex=" + tabindex + "]").select();
        } 
catch (ex) {
        }
    }
}

//获得兼容的事件
function getEvent() {
    
if (document.all) return window.event; //如果是ie
    func = getEvent.caller;
    
while (func != null) {
        
var arg0 = func.arguments[0];
        
if (arg0) { if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) { return arg0; } }
        func 
= func.caller;
    }
    
return null;
}

1、在页面初始化的时候只要调用init()

2 、也input[tabindex]附事件。

            $("input[tabindex]").focus(function() {
                MoveFocus(
this);//跳转到下/上一个input
            })


这个做法有些局限性。但是还是能解决一些问题的。

原文地址:https://www.cnblogs.com/caigen/p/1885288.html