控制斷行符號焦點問題:
複製代碼 代碼如下:<script type="text/javascript">
function submitForm() {
if(window.event.keyCode==13) {
document.getElementById('btnSearch').focus();
}
}
document.onkeydown=submitForm;
</script>
首先需要瞭解的是如何初始化該事件,基本語句如下:
document.onkeydown = keyDown
當瀏覽器讀到這個語句時,無論按下鍵盤上的哪個鍵,都將呼叫KeyDown()函數。
捕獲鍵盤事件對於不同的瀏覽器來說有點困難,我們分別的來學習不同瀏覽器的實現語句。
Netscape
Netscape的程式實現要比IE麻煩,你必須放一個特別的語句,來使Netscape始終去檢查擊鍵事件,如果沒有這行語句,擊鍵事件將與按下滑鼠事件搞混。特別語句如下:
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
keyDown()函數有一個隱藏的變數--一般的,我們使用字母“e”來表示這個函數。
function keyDown(e)
變數e表示發生擊鍵事件,尋找是哪個鍵被按下,使用以下屬性:
e.which
這將給出該鍵的索引值,把索引值轉化成該鍵的字母或數字值,寫:
String.fromCharCode(e.which)
把上面的語句放在一起,我們可以知道被按下的是哪一個鍵: 複製代碼 代碼如下: function keyDown(e) {
var keycode = e.which
var realkey = String.fromCharCode(e.which)
alert("keycode: " + keycode + " realkey: " + realkey)
}
document.onkeydown = keyDown
document.captureEvents(Event.KEYDOWN)
Internet Explorer
IE的程式與Netscape類似,但它不需要e變數,用window.event.keyCode來代替e.which,把鍵的索引值轉化為真實索引值方法類似:String.fromCharCode(event.keyCode),程式如下: 複製代碼 代碼如下: function keyDown() {
var keycode = event.keyCode
var realkey = String.fromCharCode(event.keyCode)
alert("keycode: " + keycode + " realkey: " + realkey)
}
document.onkeydown = keyDown
document.onkeydown = keyDown
適用於兩者的程式
用兩種瀏覽器檢查上述執行個體,你會發現執行結果不總是一樣的,這是因為兩種瀏覽器的鍵盤代碼設定不相同,因此你必須使用單獨的代碼分別來寫這段程式,而毫無別法。
建議你要完全忘掉實際的索引值,僅僅使用鍵盤的代碼值來工作。下面這段程式將視情況而設定,如果是用IE的話,ieKey生效,把nKey設為0,如果是用Netscape的話,nKey生效,把nKey設為0,然後用一個警示框來顯示兩者的值: 複製代碼 代碼如下: function keyDown(e) {
if (ns4) {
var nKey=e.which;
var ieKey=0
}
if (ie4) {
var ieKey=event.keyCode;
var nKey=0
}
alert("nKey:"+nKey+" ieKey:" + ieKey)
}
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
使用鍵盤移動對象
下面的程式實現用鍵盤移動對象,程式將檢查哪一個鍵被按下,從而調用相應的函數來移動對象。本例中,當字母“A”被按下時,對象就開始移動,字母“A”鍵在nKey中的值是97,ieKey的值為65,在程式中將分別檢查這兩個值。 複製代碼 代碼如下: function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
}
function keyDown(e) {
if (ns4) { var nKey=e.which; var ieKey=0 }
if (ie4) { var ieKey=event.keyCode; var nKey=0 }
if (nKey==97 || ieKey==65) { // 如果"A"鍵按下
slide()
}
}
function slide() {
block.xpos += 5
block.left = block.xpos
status = block.xpos // 這一句不一定需要,只是為了檢查狀態
setTimeout("slide()",30)
}
增加 "Active"變數
上面程式稍微有些不足,對象移動以後就無法使它停止了,而且當你多按幾次A鍵時,物體將運動得越來越快,這裡我們來修補它。
使用變數"active"來改變這種情況,插入if語句來檢查函數是否重複。 複製代碼 代碼如下: function slide() {
if (myobj.active) {
myobj.xpos += 5
myojb.left = myobj.xpos
setTimeout("slide()",30)
}
}
在這種情況中,slide()函數只有在myobj.active值為真的時候才會工作,當myobj.active值為假時,對象將停止移動。
使用 onKeyUp 和 "Active" 變數
onkeyup事件和onkeydown事件工作原理相同,用以下語句初始化該事件: 複製代碼 代碼如下: document.onkeydown = keyDown
document.onkeyup = keyUp
if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)
keyUp() 函數與之相同,當一個鍵被放開時事件被激發,對象停止移動,並將active變數置為0: 複製代碼 代碼如下: function keyUp(e) {
if (ns4) var nKey = e.which
if (ie4) var ieKey = window.event.keyCode
if (nKey==97 || ieKey==65)
block.active = false
}
下面是比較完整的程式: 複製代碼 代碼如下: function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
block.active = false
document.onkeydown = keyDown
document.onkeyup = keyUp
if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)
}
function keyDown(e) {
if (ns4) {var nKey=e.which; var ieKey=0}
if (ie4) {var ieKey=event.keyCode; var nKey=0}
if ((nKey==97 || ieKey==65) && !block.active) { // if "A" key is pressed
block.active = true slide()
}
}
function keyUp(e) {
if (ns4) {var nKey=e.which; var ieKey=0}
if (ie4) {var ieKey=event.keyCode; var nKey=0}
if (nKey==97 || ieKey==65) {
block.active = false // if "A" key is released
}
}
function slide() {
if (block.active) {
block.xpos += 5
block.left = block.xpos
status = block.xpos // not needed, just for show
setTimeout("slide()",30)
}
}