javascript的鍵盤控制事件說明
更新時(shí)間:2008年04月15日 12:32:25 作者:
獲取鍵盤控制事件是實(shí)現(xiàn)交互性最有力的方法之一。
控制回車焦點(diǎn)問題:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function submitForm() {
if(window.event.keyCode==13) {
document.getElementById('btnSearch').focus();
}
}
document.onkeydown=submitForm;
</script>
首先需要了解的是如何初始化該事件,基本語句如下:
document.onkeydown = keyDown
當(dāng)瀏覽器讀到這個(gè)語句時(shí),無論按下鍵盤上的哪個(gè)鍵,都將呼叫KeyDown()函數(shù)。
捕獲鍵盤事件對(duì)于不同的瀏覽器來說有點(diǎn)困難,我們分別的來學(xué)習(xí)不同瀏覽器的實(shí)現(xiàn)語句。
Netscape
Netscape的程序?qū)崿F(xiàn)要比IE麻煩,你必須放一個(gè)特別的語句,來使Netscape始終去檢查擊鍵事件,如果沒有這行語句,擊鍵事件將與按下鼠標(biāo)事件搞混。特別語句如下:
document.onkeydown = keyDown
if (ns4) document.captureEvents(Event.KEYDOWN)
keyDown()函數(shù)有一個(gè)隱藏的變量--一般的,我們使用字母“e”來表示這個(gè)函數(shù)。
function keyDown(e)
變量e表示發(fā)生擊鍵事件,尋找是哪個(gè)鍵被按下,使用以下屬性:
e.which
這將給出該鍵的索引值,把索引值轉(zhuǎn)化成該鍵的字母或數(shù)字值,寫:
String.fromCharCode(e.which)
把上面的語句放在一起,我們可以知道被按下的是哪一個(gè)鍵:
復(fù)制代碼 代碼如下:
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,把鍵的索引值轉(zhuǎn)化為真實(shí)鍵值方法類似:String.fromCharCode(event.keyCode),程序如下:
復(fù)制代碼 代碼如下:
function keyDown() {
var keycode = event.keyCode
var realkey = String.fromCharCode(event.keyCode)
alert("keycode: " + keycode + " realkey: " + realkey)
}
document.onkeydown = keyDown
document.onkeydown = keyDown
適用于兩者的程序
用兩種瀏覽器檢查上述實(shí)例,你會(huì)發(fā)現(xiàn)執(zhí)行結(jié)果不總是一樣的,這是因?yàn)閮煞N瀏覽器的鍵盤代碼設(shè)置不相同,因此你必須使用單獨(dú)的代碼分別來寫這段程序,而毫無別法。
建議你要完全忘掉實(shí)際的鍵值,僅僅使用鍵盤的代碼值來工作。下面這段程序?qū)⒁暻闆r而設(shè)置,如果是用IE的話,ieKey生效,把nKey設(shè)為0,如果是用Netscape的話,nKey生效,把nKey設(shè)為0,然后用一個(gè)警示框來顯示兩者的值:
復(fù)制代碼 代碼如下:
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)
使用鍵盤移動(dòng)對(duì)象
下面的程序?qū)崿F(xiàn)用鍵盤移動(dòng)對(duì)象,程序?qū)z查哪一個(gè)鍵被按下,從而調(diào)用相應(yīng)的函數(shù)來移動(dòng)對(duì)象。本例中,當(dāng)字母“A”被按下時(shí),對(duì)象就開始移動(dòng),字母“A”鍵在nKey中的值是97,ieKey的值為65,在程序中將分別檢查這兩個(gè)值。
復(fù)制代碼 代碼如下:
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 // 這一句不一定需要,只是為了檢查狀態(tài)
setTimeout("slide()",30)
}
增加 "Active"變量
上面程序稍微有些不足,對(duì)象移動(dòng)以后就無法使它停止了,而且當(dāng)你多按幾次A鍵時(shí),物體將運(yùn)動(dòng)得越來越快,這里我們來修補(bǔ)它。
使用變量"active"來改變這種情況,插入if語句來檢查函數(shù)是否重復(fù)。
復(fù)制代碼 代碼如下:
function slide() {
if (myobj.active) {
myobj.xpos += 5
myojb.left = myobj.xpos
setTimeout("slide()",30)
}
}
在這種情況中,slide()函數(shù)只有在myobj.active值為真的時(shí)候才會(huì)工作,當(dāng)myobj.active值為假時(shí),對(duì)象將停止移動(dòng)。
使用 onKeyUp 和 "Active" 變量
onkeyup事件和onkeydown事件工作原理相同,用以下語句初始化該事件:
復(fù)制代碼 代碼如下:
document.onkeydown = keyDown
document.onkeyup = keyUp
if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)
keyUp() 函數(shù)與之相同,當(dāng)一個(gè)鍵被放開時(shí)事件被激發(fā),對(duì)象停止移動(dòng),并將active變量置為0:
復(fù)制代碼 代碼如下:
function keyUp(e) {
if (ns4) var nKey = e.which
if (ie4) var ieKey = window.event.keyCode
if (nKey==97 || ieKey==65)
block.active = false
}
下面是比較完整的程序:
復(fù)制代碼 代碼如下:
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)
}
}
您可能感興趣的文章:
- JavaScript onkeypress事件入門實(shí)例(按下或按住一個(gè)鍵盤按鍵)
- JavaScript onkeydown事件入門實(shí)例(鍵盤某個(gè)按鍵被按下)
- Javascript 鍵盤事件的組合使用實(shí)現(xiàn)代碼
- Kibo 用于處理鍵盤事件的Javascript工具庫
- 在JavaScript中監(jiān)聽I(yíng)ME鍵盤輸入事件
- JavaScript 操作鍵盤的Enter事件(鍵盤任何事件),兼容多瀏覽器
- javascript 鍵盤事件總結(jié) 推薦
- 鍵盤 keycode的值 javascript時(shí)觸發(fā)事件時(shí)很有用的要素
- javascript鍵盤事件全面控制腳本代碼
- javascript中鍵盤事件用法實(shí)例分析
相關(guān)文章
微信小程序?qū)崿F(xiàn)頂部普通選項(xiàng)卡效果(非swiper)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部普通選項(xiàng)卡效果,非swiper,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08鼠標(biāo)移到div,浮層顯示明細(xì),彈出層與div的上邊距左邊距重合(示例代碼)
這篇文章主要介紹了鼠標(biāo)移到div,浮層顯示明細(xì),彈出層與div的上邊距左邊距重合的實(shí)例代碼。需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-12-12基于JavaScript實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)功能代碼實(shí)例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)簡(jiǎn)單抽獎(jiǎng)功能代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10前端實(shí)現(xiàn)下載文件(包含壓縮包下載)方式詳細(xì)總結(jié)
這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)下載文件(包含壓縮包下載)方式的相關(guān)資料,這段時(shí)間項(xiàng)目需要下載文件,所以這里給大家總結(jié)下,需要的朋友可以參考下2023-09-09JS實(shí)現(xiàn)TITLE懸停長(zhǎng)久顯示效果完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)TITLE懸停長(zhǎng)久顯示效果,結(jié)合完整實(shí)例形式分析了JavaScript鼠標(biāo)事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-02-02JS簡(jiǎn)單添加元素新節(jié)點(diǎn)的方法示例
這篇文章主要介紹了JS簡(jiǎn)單添加元素新節(jié)點(diǎn)的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)頁面元素節(jié)點(diǎn)的創(chuàng)建、添加、克隆等相關(guān)操作技巧,需要的朋友可以參考下2018-02-02

淺析script標(biāo)簽中的defer與async屬性
最近在網(wǎng)上看到一個(gè)前輩在寫script標(biāo)簽的時(shí)候,居然同時(shí)寫了async和defer屬性,想著這是什么意思呢?所以決定深入的了解下這其中的學(xué)問,以下這篇文章就是個(gè)人在學(xué)習(xí)了之后的一些總結(jié)分析,有需要的朋友們可以參考借鑒,下面來一起學(xué)習(xí)學(xué)習(xí)吧。
2016-11-11