JQuery 滚动列表框模仿键盘导航

JQuery scroll listbox imitation with keyboard navigation?

本文关键字：键盘 导航 滚动 列表 JQuery      更新时间：2023-09-26

My JavaScript listbox implementation：

$(function() {
    $('#listbox1').on('keydown', function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        var $e = $(this).find('.selected');
        switch(e.which) {
            case 38:
                ($e.prev().length) && ($e = $e.removeClass('selected').prev().addClass('selected'));
                $(this).scrollTop( $e.position().top + $(this).scrollTop() );
            break;
            case 40:
                ($e.next().length) && ($e = $e.removeClass('selected').next().addClass('selected'));
                $(this).scrollTop( $e.position().top + $(this).scrollTop() );
            break;
        }
    });
});

这是一个小提琴：http://jsfiddle.net/7qy8p2x1/。

有一个真实的列表框和他的模仿。我不去，所以他们使用键盘导航箭头（向上和向下）滚动相同。真正的列表框在到达最后一个元素之前不会滚动，但模仿会滚动（在每个元素之后）。向上滚动工作正常。

请帮助我正确实现向下滚动行为。

我使用.jspPane滚动列表，但是您可以在没有jsp的情况下使用它（如果您可以使用咖啡）可以向您显示.coffee - 它更具可读性。如果你有问题 - 生病

帮助你 
var keyboard_control, scroll_to_active;
keyboard_control = function() {
  $('.control-edu').on('keydown', 'input', function(e) {
    var $active, $first, $last, $this, i, temp;
    $this = $(this);
    $active = $('.jspPane span.active');
    $first = $('.jspPane span.opinion').first();
    $last = $('.jspPane span.opinion').last();
    if ($this.closest('.control-edu').find('.options span').length > 1) {
      if (e.keyCode === 38) {
        if ($active.length > 0) {
          if ($active.prev().length > 0) {
            temp = $active.prev();
            $active.removeClass('active');
            temp.addClass('active');
          } else {
            $active.removeClass('active');
            $last.addClass('active');
          }
        } else {
          $last.addClass('active');
        }
        i = $('.jspPane span.active').closest('.control-edu').index();
        scroll_to_active(i, 0);
      } else if (e.keyCode === 40) {
        if ($active.length > 0) {
          if ($active.next().length > 0) {
            temp = $active.next();
            $active.removeClass('active');
            temp.addClass('active');
          } else {
            $active.removeClass('active');
            $first.addClass('active');
          }
        } else {
          $first.addClass('active');
        }
        i = $('.jspPane span.active').closest('.control-edu').index();
        scroll_to_active(i, 1);
      } else if (e.keyCode === 13 && $active.length > 0) {
        $active.click();
      }
    }
  });
};
scroll_to_active = function(i, flag) {
  var $active;
  $active = $('.jspPane span.active');
  if (flag === 1) {
    if (($active.next().length > 0) && ($active.prev().length > 0)) {
      api[i - 1].scrollToElement($active.next());
    } else if ($active.prev().length === 0) {
      api[i - 1].scrollToElement($active);
    } else if ($active.next().length === 0) {
      api[i - 1].scrollToBottom();
    }
  } else if (flag === 0) {
    if ($active.next().length > 0) {
      api[i - 1].scrollToElement($active);
    } else {
      api[i - 1].scrollToBottom();
    }
  } else {
    return
  }
};

编辑：删除js2咖啡返回

看看这个

http://jsfiddle.net/7qy8p2x1/1/

$(function() {
$('#listbox1').on('keydown', function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    var $e = $(this).find('.selected');
    switch(e.which) {
        case 38:
            ($e.prev().length) && ($e = $e.removeClass('selected').prev().addClass('selected'));
            $(this).scrollTop( $e.position().top + $(this).scrollTop() );
        break;
        case 40:
            ($e.next().length) && ($e = $e.removeClass('selected').next().addClass('selected'));
            $(this).scrollTop( $e.position().top + $(this).scrollTop() );
        break;
    }
});
$('#listbox2').on('keydown', function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
        var $e = $(this).find(':selected');
    switch(e.which) {
        case 38:
            ($e.prev().length) && ($e = $e.removeClass('selected').prev().addClass('selected'));
            $(this).scrollTop( $e.position().top + $(this).scrollTop() );
        break;
        case 40:
            ($e.next().length) && ($e = $e.removeClass('selected').next().addClass('selected'));
            $(this).scrollTop( $e.position().top + $(this).scrollTop() );
        break;
    }
});  });

我的解决方案是：

$(function() {
    $('#listbox1').on('keydown', function(e) {
        e.preventDefault();
        e.stopImmediatePropagation();
        var $e = $(this).find('.selected');
        switch(e.which) {
            case 38:
                ($e.prev().length) && ($e = $e.removeClass('selected').prev().addClass('selected'));
                ($e.position().top < 0) && ($(this).scrollTop( $e[0].offsetTop ));
            break;
            case 40:
                ($e.next().length) && ($e = $e.removeClass('selected').next().addClass('selected'));
                ($e.position().top - $(this).height() + $e.height() > 0) && ($(this).scrollTop( $e[0].offsetTop - $(this).height() + $e.outerHeight() ));
            break;
        }
    });
});

http://jsfiddle.net/7qy8p2x1/7/

跨浏览器（但解决方法）解决方案：

http://jsfiddle.net/7qy8p2x1/4/

相关文章：