键盘流-不用鼠标控制jsp页面的光标移动

现在的情况是：我用enter代替了tab的code是可以往下跳的，但是方向键来控制还是不行的，而且遇到下拉列表也展示不开，貌似是css影响了js

解决方案 »

  1.   

    简单的写了一个demo看看是不是要想的，
    预览地址：
    http://jsbin.com/ATuGuqIN/2/
    代码：var lastTabIndex = 3;
    var user = $('.user');
    var curIndex = 1;
    $(document).keydown(function(e){
        var tabIndex = $('.user').attr('tabindex');
        var first = user.eq(0);    if(curIndex > lastTabIndex){
            curIndex = 0;
        }    if(e.which == 39){ // 向右
            user.removeClass('on');
            $('[tabindex=' + (curIndex++) + ']').focus().addClass('on');
        }
    });
      

  2.   

    光标你不通过鼠标是肯定不会动的，不过对象获取焦点你自己给每个对象都建立好循序，如按向下箭头，那个对象得到焦点，把id给记录起来select只能靠鼠标点击展开，enter无法展开，需要用层来模拟可以实现。<input upid="按向上箭头获取焦点的对象id，没有不就设置" leftid="同upid" rightid="" downid=""  onkeydown="你的事件，获取这4个属性进行相关焦点设置"/>
      

  3.   

    看看，<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <div>
    <a href='#' id='a1' class='tabable'>a1</a> <a href='#' id='a2' class='tabable'>a2</a> <a href='#' id='a3' class='tabable'>a3</a>
    </div>
    <div>
    <a href='#' id='b1' class='tabable'>b1</a> <a href='#' id='b2' class='tabable'>b2</a>
    </div>
    <div>
    <a href='#' id='c1' class='tabable'>c1</a> <a href='#' id='c2' class='tabable'>c2</a> <a href='#' id='c3' class='tabable'>c3</a> <a href='#' id='c4' class='tabable'>c4</a>
    </div>
    <div>
    <a href='#' id='d1' class='tabable'>d1</a>
    </div>
    <div>
    <a href='#' id='e1' class='tabable'>e1</a> <a href='#' id='e2' class='tabable'>e1</a>
    </div>
    <script>
    var $x = document.getElementById('xx'); var elems = [];
    var indexRow = 0;
    var indexCol = 0;
    var elemsLen;
    var elemL;
    function initTabable() {
    //var elemNodeList = document.getElementsByClassName('tabable');
    // elems = [].slice.call(elemNodeList);
    //因为还有上下，所以只能手动对元素入表。
    //不知到，直接装元素会不会快点，反正懒的写。
    //元素的id;
    elems[0] = [ 'a1', 'a2', 'a3' ];
    elems[1] = [ 'b1', 'b2' ];
    elems[2] = [ 'c1', 'c2', 'c3', 'c4' ];
    elems[3] = [ 'd1' ];
    elems[4] = [ 'e1', 'e2' ];
    elemsLen = 5;
    elemL = [ 3, 2, 4, 1, 2 ] //每行的长度。 doEffectU(indexRow, indexCol);
    }
    function getTabIndex() { }
    function doEffectD(r, c) {
    var targetId = elems[r][c];
    var target = document.getElementById(targetId);
    target.style.backgroundColor = 'white';
    //....
    }
    function doEffectU(r, c) {
    var targetId = elems[r][c];
    var target = document.getElementById(targetId);
    target.style.backgroundColor = 'red';
    //....
    } function keyBind() { } function doKeydown() {
    doEffectD(indexRow, indexCol); } function doKeyup(e) {
    var w = e.which;
    if (w == 38) {
    //up
    if (indexRow == 0) {
    indexRow = elemsLen - 1;
    } else {
    indexRow -= 1;
    }
    indexCol = 0;
    return doEffectU(indexRow, indexCol);
    }
    if (w == 40) {
    //down
    if (indexRow == elemsLen - 1) {
    indexRow = 0;
    } else {
    indexRow += 1;
    }
    indexCol = 0;
    return doEffectU(indexRow, indexCol);
    }
    if (w == 39) {
    //right
    if ((indexRow == elemsLen-1) && (indexCol == elemL[elemsLen-1]-1)) {
    indexCol = 0;
    indexRow = 0;
    } else if (indexCol == elemL[indexRow] - 1) {
    indexRow += 1;
    indexCol = 0
    } else {
    indexCol += 1;
    } return doEffectU(indexRow, indexCol);
    }
    if (w == 37) {
    //left
    if ((indexRow == 0) && (indexCol == 0)) {
    indexCol = elemL[elemsLen - 1] - 1;
    indexRow = elemsLen - 1;
    } else if (indexCol == 0) {
    indexRow -= 1;
    indexCol = elemL[indexRow] - 1
    } else {
    indexCol -= 1;
    } return doEffectU(indexRow, indexCol);
    } } initTabable();
    document.addEventListener('keydown', doKeydown);
    document.addEventListener('keyup', doKeyup); </script></body>
    </html>