JS实现键盘移动光标

╰半橙微兮° 2023-10-17 08:29 84阅读 0赞

通过键盘的上下左右，实现对光标的移动，当点击回车时，进入所选的对应页面。左边是菜单栏，右边是具体数据。

![Center][]

### **左边的菜单栏布局** ###

## ![Center 1][]    ##

### **右边的具体数据局部** ###

![Center 2][]

## 1、先查找到菜单栏所以元素 ##

##  function dh\_method()\{  ##

alert("菜单栏加载");  
 var my\_dz=0;//右移动时改变值，从而将左边的光标取消，右边的光标设置（my\_dz=1时）

var baseIndex = 10;//初始值

var li\_sum=$("\#div\_dh ul").find("li").size();  
$("\#div\_dh").find("li").each(function(li) \{  
 $(this).find("a")  
.attr("tabindex", li \* 10 + baseIndex).attr("my\_li",li )  
 .addClass("cGridInputs");  
 //alert("当前位置:"+li+"列");  
  
\});//li==结束位置  
  
 if(my\_dz==0)\{  
 $(".cGridInputs\[tabindex=" + 10 + "\]").focus() ;  
\}

## 2、菜单栏的键盘控制 ##

$("\#div\_dh .cGridInputs").keydown( function(evt) \{  
 var tabIndex = parseInt($(this).attr("tabindex"));  
 var my\_lis = parseInt($(this).attr("my\_li"));  
 switch (evt.which) \{  
 case 40: //下---------------------  
 if( my\_lis==9)\{//最后一个  
 return;  
 \}  
 my\_lis++;  
 tabIndex = my\_lis\*10+ baseIndex;  
break;  
case 38: //上---------------------  
 if( my\_lis==0)\{//第一个  
 return;  
 \}  
 my\_lis--;  
 tabIndex = my\_lis\*10+ baseIndex;  
 break;  
case 39: //右---------------------  
 // $(".cGridInput\[tabindex=" + 10 + "\]").blur();  
 my\_dz=1;  
 break;  
 case 13:  
 /\* alert("确定进入所选菜单--坐标:"+my\_lis);  
 var url= $("ul li:eq("+my\_lis+")").find("a").attr("href");  
 alert("菜单链接: "+url);  
 window.location.href=url;\*/  
break;  
  
 \};  
if(my\_dz==0)\{  
 $(".cGridInputs\[tabindex=" + tabIndex + "\]").focus() ;  
 var distance = my\_lis\*(40+0)+50+'px';  
 $('.lanrenzhijia .hover').stop().animate(\{top:distance\},150);  
\}  
 if(my\_dz==1)\{  
  
 $(".cGridInputs\[tabindex=" + tabIndex + "\]").blur();  
 zt\_method(); //  当点击右时，从左边将移动到右边，调用右边移动的函数  
return;  
  
\}  
  
 \});  
\};

## 3、右边页面的查找与控制 ##

function zt\_method()\{  
alert("主体加载");  
 var baseIndex = 10;//初始值  
var my\_list;  
 var my\_li;  
 var arrays = \[\];  
 var my\_dz=0;  
var rows=$("\#list ").size();//总行数  
$("\#list ").each(function(list) \{  
  
arrays.push(\{"list":list,"li": $(this).find("li").size()\});  
// alert("list-第: "+list+"行;"+"li-总："+$(this).find("li").size()+"张");  
 $(this).find("li").each(function(li) \{  
 $(this).find("img")  
.attr("tabindex", list \* 10 + li + baseIndex).attr("my\_list", list ).attr("my\_li",li )  
 .addClass("cGridInput");  
// alert("当前位置:"+list+"行"+li+"列");  
  
\});//li==结束位置  
  
\});//子div==结束位置  
  
  
  
 if(my\_dz==0)\{  
$(".cGridInput\[tabindex=" + 10 + "\]").focus();  
$(".div\_right \#list:eq(0) li:eq(0)").addClass("mybg");   
localStorage.clear();  
\}  
  
$("\#list .cGridInput").keydown( function(evt) \{  
 var tabIndex = parseInt($(this).attr("tabindex"));  
var my\_lists = parseInt($(this).attr("my\_list"));  
 var my\_lis = parseInt($(this).attr("my\_li"));  
var column = 0;//列总数  
switch (evt.which) \{  
case 38: //上---------------------  
if ( my\_lists == 0)\{  
return;  
 \}  
my\_lists -= 1;  
 $.each(arrays,function(index,value) \{  
 if(my\_lists == value.list)\{  
 column = value.li;  
 return;  
 \}  
 \});  
  
if (my\_lis > column-1) \{  
my\_lis = column-1;  
\}  
 tabIndex = my\_lists \* 10 +my\_lis + baseIndex;  
break;  
case 40: //下---------------------  
  
if (my\_lists == rows-1) \{ //已经是最后一行  
return;  
\}  
my\_lists += 1;  
$.each(arrays,function(index,value) \{  
 if(my\_lists == value.list)\{  
column = value.li;  
 return;  
 \}  
 \});  
  
if (my\_lis > column-1) \{  
my\_lis = column-1;  
\}  
 tabIndex = my\_lists \* 10 +my\_lis + baseIndex;  
break;  
case 37: //左移---------------------  
if (my\_lists == 0 && my\_lis == 0) \{ //第一行第一个,跳转到菜单------------------------  
 //跳到菜单---------------  
my\_dz=1;  
  
//return;  
\}  
 if(my\_lis == 0)\{  
 my\_lists--;  
 $.each(arrays,function(index,value) \{  
 if(my\_lists == value.list)\{  
 column = value.li;  
 return;  
 \}  
 \});  
  
 my\_lis=column-1;  
 tabIndex=tabIndex-10+my\_lis;  
 \}else\{  
tabIndex--;  
my\_lis--;  
 \}  
  
break;  
case 39: //右---------------------  
  
$.each(arrays,function(index,value) \{  
 if(my\_lists == value.list)\{  
column = value.li;  
  
 return;  
 \}  
 \});  
  
if (my\_lists == rows-1 && my\_lis == column-1) \{ //最后行最后一个,跳转到第一个  
my\_lists =0 ;  
my\_lis= 0;  
 break;  
  
\}  
if(my\_lis == column-1)\{  
 my\_lists++;  
 my\_lis=0;  
  
 tabIndex=tabIndex+10-(column-1);  
  
 \}  
 else\{  
tabIndex++;  
my\_lis++;  
 \}  
  
break;  
  
 case 13:  
 alert("确定进入观看--坐标:"+my\_lists+" , "+my\_lis);  
 var url= $("\#div\_index \#list:eq("+my\_lists+") li:eq("+my\_lis+")").find("a").attr("href");  
 alert("电影超链接: "+url);  
 window.location.href=url;  
break;  
  
 \};  
 //改变选择的颜色--------------------------------  
 if(my\_dz==0)\{  
 alert(my\_lists+"行,列"+my\_lis+"=="+tabIndex+"光标");  
$(".div\_right \#list li").removeClass("mybg");   
 $(".div\_right \#list:eq("+my\_lists+") li:eq("+my\_lis+")").addClass("mybg");   
 $(".cGridInput\[tabindex=" + tabIndex + "\]").focus();  
\}  
if(my\_dz==1)\{  
 $(".cGridInput\[tabindex=" + tabIndex + "\]").blur();  
 $(".div\_right \#list li").removeClass("mybg");   
 dh\_method();  
 return;  
\}  
  
 \});//按键==结束位置  
 \};

## 4、实现效果图 ##

![Center 3][] ![Center 4][]

![Center 5][] ![Center 6][]

5、个人总结与优化

这是一个页面的实现，框架与框架的嵌套布局，将分别写菜单的js与具体数据的js，关键在于跨页面的框架js之间的调用，正在完善一些问题。本人处学者，有问题就多交流

[Center]: https://img-blog.csdn.net/20160819165422742?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20160819172122853?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: https://img-blog.csdn.net/20160819172131838?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: https://img-blog.csdn.net/20160819170719002?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: https://img-blog.csdn.net/20160819170732882?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 5]: https://img-blog.csdn.net/20160819170746773?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 6]: https://img-blog.csdn.net/20160819170753758?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center