2012-05-10 29 views
2

我正在嘗試構建一個公共牆,對所有訪問網頁的用戶來說都是一樣的,並且在用戶之間進行同步。我努力正確捕獲鍵盤輸入以應用於畫布。我的函數基於document.onkeydown,可以在上述網頁中引用的'script.js'中看到。當你雙擊一個單詞和寫入時,可以看到它工作。document.onkeydown鍵盤輸入只有大寫

不幸的是,這似乎沒有捕獲任何東西,但大寫字母,我正在尋找一種替代方式去做這件事。我研究過這個page中描述的'textInput'事件,但是它似乎只被WebKit瀏覽器支持,並且我想構建一些通用的東西。有人可以提出一種替代方法來捕獲鍵盤輸入以用於畫布嗎?或者,我正在做一些愚蠢的事情?描述

代碼是在這裏:

document.onkeydown = keyHandler; 
function keyHandler(e) 
{ 

    var pressedKey; 
    if (document.all) { e = window.event; 
     pressedKey = e.keyCode; } 
    if (e.which) { 
     pressedKey = e.which; 
    } 
    if (pressedKey == 8) { 
     e.cancelBubble = true; // cancel goto history[-1] in chrome 
     e.returnValue = false; 
    } 
    if (pressedKey == 27) 
    { 
     // escape key was pressed 
     keyCaptureEdit = null; 
    } 
    if (pressedKey != null && keyCaptureEdit != null) 
    { 
     keyCaptureEdit.callback(pressedKey); 
    } 

} 
... Later on in code describing each text object ... 

keyCaptureEdit.callback = function (keyCode) { 
    var keyCaptured = String.fromCharCode(keyCode); 
    if (keyCaptured == "\b") { //backspace character 
     t.attrs.timestamp = t.attrs.timestamp + 1; 
     t.setText(t.getText().slice(0, -1)); 
    } 
    else if (keyCode == 32 || keyCode >= 48 && keyCode <= 57 || keyCode >= 65 && keyCode <= 90) 
    { 
     t.attrs.timestamp = t.attrs.timestamp + 1; 
     t.setText(t.getText() + keyCaptured); 
    }    
    layer.draw(); 
} 

回答

2

好一個改變你的代碼將是微不足道的方式來跟蹤shift鍵:

... 
    { 
     keyCaptureEdit.callback(pressedKey, e.shiftKey); // <-- keep track of shift key 
    } 

} 

... 

keyCaptureEdit.callback = function (keyCode, shift) { 
    var keyCaptured = String.fromCharCode(keyCode); 
    // shift key not pressed? Then it's lowercase 
    if (shift === false) keyCaptured = keyCaptured.toLowerCase() 

但是,這並不佔CapsLock鍵。

在jQuery中它很簡單,因爲右鍵代碼爲你做:

$(document).keypress(function(event) { 
    var keyCaptured = String.fromCharCode(event.keyCode); 
    console.log(keyCaptured); 
}); 

在該示例中,控制檯將正確登錄P或P取決於什麼是類型化的。