자바 스크립트 키보드, 시프트 + 키 콤보

Question

바닐라 자바 ​​스크립트에서 온 스크린 키보드를 만들고 실제 키보드 키가 눌려지면 온 스크린 키보드 키의 색상을 변경하려고합니다. 건반. 여태까지는 그런대로 잘됐다. 문제는 keyup과 keydown을 사용하고 있지만 shift-combos 권한을 얻을 수없는 것입니다.

이는 무슨 일이 일어날 : 보통 키가 파란색으로 색상을 변경 누르면

• .
• Shift 키를 누르면 색상이 빨간색으로 바뀝니다.
• shift-key + a 키를 누르면 모두 빨간색으로 표시되고 해제되면 정상으로 돌아가지만 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

귀하의 코드는, 그가 키 누르기 이벤트에 의해 거기에 오류가 발생했습니다에서 완전히 새로운 해요. 시프트 키를 누르고 있으면 계속 이벤트가 발사됩니다. 그러나 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'프레스에서만 작동합니다.