解決WEB頁面上"焦點(diǎn)控制"一法


對(duì)于B/S的系統(tǒng),在頁面控制上不如C/S系統(tǒng)那么控制靈活,就如輸入的焦點(diǎn)問題,客戶都很想通過鍵盤對(duì)數(shù)據(jù)進(jìn)行錄入,這樣的要求我想100個(gè)客戶中會(huì)有90個(gè)吧.

因此解決焦點(diǎn)獲取問題是必要的.大家可以從網(wǎng)上找到一些方法,不過都比較麻煩,我現(xiàn)在介紹一種很方便的.效果也很不錯(cuò)的方法給大家.

我前段時(shí)間看了MS的ASP.NET講座,在里面談到了如何讓"回車鍵"使文本框的焦點(diǎn)一個(gè)個(gè)下移.其中提了三種方法,最好的一種是這樣的:

用客戶端腳本在頁面添加document的onkeydown事件,讓頁面在接受到回車事件后,進(jìn)行Tab鍵的功能,即只要把event的keyCode由13變?yōu)?

VBScript代碼:

<script language="vbscript">

sub document_onkeydown

if event.keyCode=13 then

event.keyCode=9

end if

end sub

</script>

Javascript代碼如下:

<script language="javascript" for="document" event="onkeydown">

<!--

if(event.keyCode==13)

event.keyCode=9;

-->

</script>

這樣的處理方式,可以實(shí)現(xiàn)焦點(diǎn)往下移動(dòng),但對(duì)于按鈕也起同樣的作用,一般的客戶在輸入完資料以后,跳到按鈕后,最好能直接按"回車"進(jìn)行數(shù)據(jù)的提交.因此,對(duì)上面的方法要進(jìn)行一下修改,應(yīng)該對(duì)于"提交"按鈕不進(jìn)行焦點(diǎn)轉(zhuǎn)移.而直接激活提交.



因此我對(duì)上面的代碼進(jìn)行了一個(gè)修改,即判斷事件的"源",是否為提交按鈕,代碼如下:

<script language="javascript" for="document" event="onkeydown">

<!--

if(event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event.srcElement.type!='')

event.keyCode=9;

-->

</script>

判斷是否為button, 是因?yàn)樵贖TML上會(huì)有type="button"

判斷是否為submit,是因?yàn)镠TML上會(huì)有type="submit"

判斷是否為reset,是因?yàn)镠TML上的"重置"應(yīng)該要被執(zhí)行

判斷是否為空,是因?yàn)閷?duì)于HTML上的"<a>鏈接"也應(yīng)該被執(zhí)行,這種情況發(fā)生的情況不多,可以使用"tabindex=-1"的方式來取消鏈接獲得焦點(diǎn).

以上是我個(gè)人觀點(diǎn),我是在ASP.NET中進(jìn)行系統(tǒng)開發(fā)的,我會(huì)把這個(gè)客戶端腳本放在"BasePage"中,其他頁面都會(huì)繼承他,從而可以在很多頁面進(jìn)行控制. 如有其他好辦法,希望大家討論.

聽棠