方向键和回车控制Web页面的输入框焦点

来源：互联网发布：js 和风天气编辑：程序博客网时间：2024/06/11 09:51

最近替一个台湾客户做一个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页面中加入如下代码：

aspx页面的最下面插入下面代码

<!--

SetFocusToFirstControl();

-->

</script>

一切OK ：）