Javascript鍵盤，Shift +組合鍵

Question

我創建了一個屏幕鍵盤在香草Javascript和我試圖改變屏幕上的鍵盤鍵的顏色，當相同的鍵被按下的物理鍵盤。到現在爲止還挺好。問題是，我正在使用keyup和keydown，但我似乎無法獲得正確的shift-combos。

這是什麼將要發生：

• 當一個正常的鍵被按下它改變顏色爲藍色。
• 當按下shift鍵時，它將顏色變爲紅色。
• 當按下shift鍵+一個鍵時，它們都會變成紅色，並且當釋放鍵時它將恢復正常，但是如果shift鍵仍然處於按下狀態，它將會有紅色。

問題：當按下shift鍵+正常鍵時，即使按下shift鍵，如果我釋放正常鍵，兩個鍵上的顏色都會消失。

這是到目前爲止我的代碼：

farge1 = ' key-pressed'; 
farge2 = ' shift-pressed'; 
shift = false; 




var klikk = function(e) { 
e = e || window.event; 
var k = e.keyCode || e.which; 

if (k === 13) { 
    document.getElementById('enter').className += (farge1); 
} else if (k === 8) { 
    document.getElementById('backspace').className += (farge1); 
} else if (k === 16) { 
    document.getElementById('shift-right').className += (farge2); 
    document.getElementById('shift-left').className += (farge2); 
    shift = true; 
} 

}; 

var bokstav = function(e) { 
e = e || window.event; 
var b = String.fromCharCode(e.which).toLowerCase(); 

if (shift === true) { 
    document.getElementById(b).className += (farge2); 
} else { 
    document.getElementById(b).className += (farge1); 
} 
}; 


var slipp = function(e) { 
e = e || window.event; 
var k = e.keyCode || e.which; 
var b = String.fromCharCode(e.which).toLowerCase(); 

document.getElementById('enter').className = (""); 
document.getElementById('backspace').className = (""); 

document.getElementById(b).className = (""); 
if (k !== 16) { 
    document.getElementById('shift-left').className = (""); 
    document.getElementById('shift-right').className = (""); 
} 
shift = false; 

}; 


document.onkeypress = bokstav; 
document.onkeydown = klikk; 
document.onkeyup = slipp; 

我在這個..沒有jQuery的PLS

Answer 1

你的代碼中有一個錯誤，這是由按鍵事件造成全新的。無論何時按住Shift鍵，事件都會持續發射。但是，String.fromCharCode(e.which)將始終返回Shift的空字符串，該字符串不是可打印的字符。您需要邏輯添加到您的按鍵事件處理的轉變：

var bokstav = function(e) { 
    e = e || window.event; 
    var b = String.fromCharCode(e.which).toLowerCase(); 

    if (b) { // make sure b has a value 
     if (shift === true) { 
      document.getElementById(b).className += (farge2); 
     } else { 
      document.getElementById(b).className += (farge1); 
     } 
    } 
}; 

爲了防止轉變，從一個普通KEYUP改變：

document.getElementById(b).className = (""); 
if (k === 16) { 
    document.getElementById('shift-left').className = (""); 
    document.getElementById('shift-right').className = (""); 
    shift = false; 
} 

這裏是一個Fiddle。這隻適用於'a'或'shift'+'a'印刷機。