如何通过键事件获取可见值

时间:2014-06-25 07:08:53

标签: jquery html keyevent

我正在创建一个选择框,并在keydown之后放置键事件,滚动条不会关闭,但键事件和值的选择运行良好enter image description here

小提琴只是在解决它如何控制卷轴    http://jsfiddle.net/nsoni/d8FNp/1/

HTML:

<div class="scrol">
    <div class="ful ful_1">1</div>
    <div class="ful ful_2">2</div>
    <div class="ful ful_3">3</div>
    <div class="ful ful_4">4</div>
    <div class="ful ful_5">5</div>
    <div class="ful ful_6">6</div>
    <div class="ful ful_7">7</div>
    <div class="ful ful_8">8</div>
    <div class="ful ful_9">9</div>
    <div class="ful ful_10">10</div>
</div>

jquery的:

var i=1;
$(window).bind('keydown', function(e){
    if (e.keyCode==13) {
        alert($('.change').text());
    } else if (e.keyCode==40) {
        if(i>=11)i=1;
        $('.ful').removeClass("change");
        $('.ful_'+i).addClass("change");  i++;     
    } 
     else if (e.keyCode==38) {
         if(i<=0)i=10;
         $('.ful').removeClass("change");
         $('.ful_'+i).addClass("change");  i--;
    }
});

的CSS:

.scrol{
    width:50%;
    height:160px;
    overflow-y: scroll;
    overflow-x:hidden;
}
.ful{
    background:grey;
    margin-bottom:2px;
    border:1px solid;
}
.change{
    background:#fff;
}
.change1{
    background:#cdcdcd;
}

1 个答案:

答案 0 :(得分:1)

也许这会朝你想要的方向发展?

var i = 1;

$(document).on('keydown', function (e) {

    if (e.keyCode == 13) {
    } else if (e.keyCode == 40) {
        i++;
        if (i >= 11) i = 1;
        $('.ful').removeClass("change");
        $('.ful_' + i).addClass("change");
        $('.scrol').animate({scrollTop:$('.ful_' + i).offset().top},200);

    } else if (e.keyCode == 38) {
        i--;
        if (i <= 0) i = 10;
        $('.ful').removeClass("change");
        $('.ful_' + i).addClass("change");
        $('.scrol').animate({scrollTop:$('.ful_' + i).offset().top}, 200);

    }
    e.preventDefault();
});

http://jsfiddle.net/a99He/2/