本文介绍了一个使用JavaScript实现的键盘导航功能，使用户可以通过方向键和回车键在网页表单的各个输入字段间进行切换。该方案适用于希望提高用户体验的Web应用程序。
最近替一个台湾客户做一个BS项目，客户明确要求用方向键、回车控制页面上的输入框的焦点。即要求和Excel上的操作类似。
经过一个晚上的整理，写了几个函数来实现。
本着探讨的目的，大家可以提一些改进的意见：
首先建立一个Public.js文件，包含如下的方法：
var curCtlIndex = 0;var arrCtl = new Array();var oldEvent = new Array();function SetFocusToFirstControl()
...{
var i = 0,j = -1; for(i=0;i<document.forms[0].elements.length;i++)
...{ if(document.forms[0].elements[i].tagName == 'INPUT' || document.forms[0].elements[i].tagName == 'SELECT' || document.forms[0].elements[i].tagName == 'TEXTAREA') ...{ if(document.forms[0].elements[i].type != 'submit' && document.forms[0].elements[i].type != 'reset' && document.forms[0].elements[i].type != 'hidden' && document.forms[0].elements[i].type != 'button') ...{ if(document.forms[0].elements[i].disabled == 'disabled' || document.forms[0].elements[i].disabled == true) continue; if(document.forms[0].elements[i].readOnly) continue; if(document.forms[0].elements[i].style.display =="none") continue; if(document.forms[0].elements[i].style.width == "0px") continue; try ...{ j++; arrCtl[j] = document.forms[0].elements[i]; arrCtl[j].blur();
} catch(el) ...{ } } document.forms[0].elements[i].onblur = onblur_handler; document.forms[0].elements[i].onfocus = onfocus_handler; } //alert(document.forms[0].elements[i].type + document.forms[0].elements[i].tagName); } //alert(arrCtl.length); for(i=0;i<arrCtl.length;i++) ...{ try ...{ arrCtl[i].focus(); break; } catch(el) ...{} }
}/**//**/function keyEnter(objSubmit) ...{ var i = 0; if(event.keyCode == 13) // || event.keyCode == 39 || event.keyCode == 40 ...{ for(i=curCtlIndex+1;i<arrCtl.length;i++) ...{ if(curCtlIndex < arrCtl.length - 1) ...{ try ...{ curCtlIndex++; arrCtl[curCtlIndex].focus(); return false; //break; } catch(el) ...{} } else ...{ //break; } } if(objSubmit != undefined && objSubmit != '' ) document.getElementById(objSubmit).click(); return false; } else if(event.keyCode == 37) // || event.keyCode == 38 ...{ for(i=curCtlIndex-1;i>=0;i--) ...{ try ...{ curCtlIndex--; arrCtl[curCtlIndex].focus(); break; } catch(el) ...{} } return false; }}/**//*********************************************************************************************************************************/function onblur_handler()...{ this.style.backgroundColor="White";}function onfocus_handler()...{ for(i=0;i<arrCtl.length;i++) ...{ if(this.id == '') ...{ if(this.name == arrCtl[i].name) ...{ curCtlIndex = i; break; } } else ...{ if(this.id == arrCtl[i].id) ...{ curCtlIndex = i; break; } } } this.style.backgroundColor="yellow"; return true;}aspx页面中加入如下代码：
<script src="../Common/Public.js" type="text/javascript"></script><body onkeydown="javascript:return keyEnter('btnSave');">aspx页面的最下面插入下面代码
<script language="javascript" type="text/javascript"><!-- SetFocusToFirstControl();--></script>
一切OK ：）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
