close

自視窗系統以及網頁問世以來,高互動式的UI環境帶給人類全新的使用體驗,突然間滑鼠變成了不可或缺的工具,而分頁這個功能則是自CLI盛行時代就有的基本瀏覽需求,網頁在大量資料表單的呈現上,分頁的需求更是兼顧了效能以及瀏覽便利性而必備的功能,但是,當有需要瀏覽大量頁面時,以滑鼠點選下一頁的方式似乎沒有直接以鍵盤熱鍵換頁來的直覺且方便。

前兩天幫同事寫了一個換頁熱鍵的功能,發現javascript只要透過overload事件處理函式即可完成鍵盤監聽(偵測)的動作,比起利用系統API做keylogger還要簡單,不過兩者應用方式不同,不能混為一談,廢話不多說直接看code:

<script language="javascript">
//偵測瀏覽器版本
var browser=navigator.appName;
if(browser=="Netscape"){    //如果瀏覽器為Netscape或者Firefox
    //開始監聽鍵盤事件
    document.captureEvents(Event.KEYDOWN)
    document.onkeydown=function(event){
        if(event.which==37){
            //key code 37為→
            alert("你按下了下一頁");
        }
        else if(event.which==39){
            //key code 39為←
            alert("你按下了上一頁");
        }
    }
}
else{    //假設瀏覽器不為Nescape則猜測為ie
    //開始監聽鍵盤事件
    document.onkeydown = function(){
        if(event.whitch==37){
            //key code 37為→
            alert("你按下了下一頁");
        }
        else if(event.whitch==39){
            //key code 39為←
            alert("你按下了上一頁");
        }
    }
}
</script>

只需要更改上面的sample code的alert部分為換頁動作即可完成javascript熱鍵功能,在javascript中主要的鍵盤動作分為keydown、keypress以及keyup,keydown以及keypress都表示按下鍵盤,但是執行順序有差(keydown->keypress->keyup),而我在網路上面查到的資料表示,keypress無法偵測系統功能鍵(如delete)是和其他兩個事件處理函式較為不同的地方,我這邊選擇overload的函式為keydown,主要是希望熱鍵按了就有反應,如此而已,有需要的人可以根據需求overload不同函式。

有需要查key code的人可以參考Tsung's Blog的鍵盤按鍵與javascript key code對應表

arrow
arrow
    全站熱搜

    nsysumis94 發表在 痞客邦 留言(1) 人氣()