控制焦点选择模块

Html

Css

.box,li {
	padding:0;
	margin:0;
	list-style:none;
}
.box {
	display:flex;
	width:600px;
	height:200px;
	flex-wrap:wrap;
	border:1px solid yellow;
}
li {
	display:flex;
	justify-content:center;
	align-items:center;
	width:200px;
	height:100px;
	background:pink;
}
.active {
	border:2px solid red;
	box-sizing:border-box;
}

$('body').keydown(function(e) {
     //        console.log(e.keyCode)
     var o = $('.box').find('li').length;
     //        console.log(o)
     var i = $('.box').find('.active').index();
     if (e.keyCode == 39) {
         i += 1;
         if (i >= o) {
             return true;
         }
         $('.active').removeClass('active').next().addClass('active');
     } else if (e.keyCode == 37) {
         i -= 1;
         if (i < 0) {
             return true;
         }
         $('.active').removeClass('active');
         $('li').eq(i).addClass('active');
     } else if (e.keyCode == 38) {
         i -= 3;
         if (i < 0) {
             return true;
         }
         var j = $('li').eq(i).index();
         if (j === -1) {
             return true;
         }
         $('.active').removeClass('active');
         $('li').eq(i).addClass('active');
     } else if (e.keyCode == 40) {
         i += 3;
         var j = $('li').eq(i).index();
         if (j === -1) {
             return true;
         }
         $('.active').removeClass('active');
         $('li').eq(i).addClass('active');
     } else if (e.keyCode == 13) {
         var container = $('li').eq(i).text();
         console.log(container)
     }
 })

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

控制焦点选择模块



代码描述：通过键盘事件控制焦点上下左右移动

控制键盘上下左右会移动焦点选择模块。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

「失、?」┽ミ

相关代码

控制焦点选择模块

最新