jquery 键盘上下键操作列表上下滚动

最新推荐文章于 2024-04-12 13:50:56 发布

书生及第

最新推荐文章于 2024-04-12 13:50:56 发布

阅读量589

点赞数 2

分类专栏： javascript 文章标签： jquery javascript

本文链接：https://blog.youkuaiyun.com/qq_38989173/article/details/124173657

版权

javascript 专栏收录该内容

7 篇文章

订阅专栏

该博客介绍了一个使用jQuery编写的JavaScript插件，该插件允许用户通过键盘上、下键导航列表项。当按下上或下键时，当前激活的列表项会根据方向切换，并自动调整滚动条使得新选中项可见。此功能适用于需要键盘操作的网页应用，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：创建key_up_down.js文件

(function ($) {
    $.fn.extend({
        keyUpDown: function (options) {
            if (!isValid(options))
            {
                return this;
            }

            var opts = $.extend({}, options);

            $(this).keydown(function(event){
                var cur_time = new Date().getTime();

				//控制点击速度，防止连续点击，可删除
                if (cur_time - pre_time > 100)
                {
                    pre_time = cur_time;

                    if (event.keyCode == 38)  //键盘上键
                    {
                        $(this).find("." + opts.item_class).each(function (index, item) {
                            if ($(this).hasClass(opts.active_class) && index > 0)
                            {
                                $(this).removeClass(opts.active_class);
                                $(this).prev().addClass(opts.active_class);
                                scrollVisible($(this).prev(),'up');
                            }
                        });
                    }
                    else if (event.keyCode == 40)  //键盘下键
                    {
                        var leng =  $(this).find("." + opts.item_class).length;
                        $(this).find("." + opts.item_class).each(function (index, item) {
                            if ($(this).hasClass(opts.active_class) && index < leng-1)
                            {
                                $(this).removeClass(opts.active_class);
                                $(this).next().addClass(opts.active_class);
                                scrollVisible($(this).next(),'down');
                                return false;
                            }
                        });
                    }
                }
            });
        }
    });

    function isValid(options) {

        if (!options)
        {
            return false;
        }

        if ( typeof options !== "object")
        {
            return false;
        }

        if (!options.hasOwnProperty('item_class') || !options.hasOwnProperty('active_class'))
        {
            return false;
        }

        return true;
    }

    function scrollVisible(item, type)
    {
        var firstOffset = item.siblings(":first").offset();

        var itemOfsset = item.offset();
        var itemHeight = item.prop("scrollHeight");

        var scrollHeight = item.parent().height();
        var scrollTop   = item.parent().scrollTop();

        var diffTop = itemOfsset.top-firstOffset.top;

        if (type == 'down')
        {
            if (diffTop+itemHeight > scrollHeight)
            {
                item.parent().scrollTop(diffTop+itemHeight-scrollHeight);
            }
        }
        else
        {
            if (diffTop < scrollTop)
            {
                item.parent().scrollTop(diffTop);
            }
        }

    }

    var pre_time = 0;

})(window.jQuery);

二：页面引入

<script>
	$('body').keyUpDown({
		item_class   : 'list_a',
        active_class : 'layui-this'
	});
</script>

三：html列表

<div class="floating-scroll">
	<a class="list_a layui-this">列表1</a>
	<a class="list_a ">列表2</a>
	<a class="list_a ">列表3</a>
	<a class="list_a ">列表4</a>
	<a class="list_a ">列表5</a>
	<a class="list_a ">列表6</a>
	<a class="list_a ">列表7</a>
	<a class="list_a ">列表8</a>
	<a class="list_a ">列表9</a>
	<a class="list_a ">列表10</a>
</div>