給網頁的按鈕添加快捷鍵

在使用windows應用程序的過程中我們都知道,很多按鈕不需要我們點擊鼠標選擇,只需要按Alt+字母就能直接訪問了,是不是很專業呢?其實這在網頁當中一樣能實現,不知道您以前是否注意過.
要實現這樣的功能,那得使用HTML4.0定義的一個新屬性 AccessKey,將他的值設置爲您定義的鍵盤熱鍵就可以了.

比如

<input type=submit name=submit1 AccessKey=m value="確定[M]">

這樣,用戶打開您的網頁後,就可以直接按鍵盤上的Alt+m來點擊"確定"了,不過要注意,你定義的熱鍵不要與IE的熱鍵衝突,比如(F,E,V,A,T,H).

對於一般的網頁,快捷鍵也許是沒有必要的,但是如果是要經常填寫表單的網頁,或者是OA系統添加快捷鍵是非常有用的,可以提高錄入的效率。
表單添加快捷鍵第一種方法:
直接設置“accesskey”的值。

代碼:<INPUT TYPE="text" NAME="text" accesskey="a">

點Alt+A就可以看到焦點移到輸入框上了。

第二種方法:
用<Label>
<Label>標識有兩個屬性,一個是FOR,一個是ACCESSKEY。FOR的意思是,這個Lable是爲哪個元件服務的?而ACCESSKEY則定義了訪問這個元件的熱鍵。

代碼:<input type="CHECKBOX" id="check3" value="often" name="checkoften"> <label for="check3" ACCESSKEY="H">經常來這裏(<U>H</U>)</label>
點Alt+H就可以看到焦點移到輸入框上了。而且如果點“經常來這裏”焦點會直接移到輸入框上。注意:label 的for屬性所指的是表單的id,而不是name


第三種方法:
用javascript接收鍵盤的”onkeydown“事件
代碼:
<SCRIPT LANGUAGE="JavaScript">
<!--
function ctlent() {
if((event.altKey && event.keyCode == 83)) {//在這裏接收的是Alt+S事件,S的ASCII碼爲83。
document.getElementById("text").focus() //焦點將移到id爲"text"的對象上。
}
}
document.onkeydown = ctlent
//-->
</SCRIPT>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章