자바 스크립트 키 코드 충돌 : "오른쪽 화살표"와 "작은 따옴표"

다음 스크립트는 "화살표 왼쪽"과 "오른쪽 화살표"키에 반응합니다. 그러나 키 코드 충돌로 인해 작은 따옴표에도 반응합니다. 입력 필드에 해당 문자를 입력 할 수 없습니다. 그것에 대해 어떤 것도 할 수 있습니까?자바 스크립트 키 코드 충돌 : "오른쪽 화살표"와 "작은 따옴표"

<script type="text/javascript"> 
    onload = function(){ 
    document.onkeypress=function(e){ 
     if(window.event) e=window.event; 
     var keycode=(e.keyCode)?e.keyCode:e.which; 

     switch(keycode){ 
     case 37: window.location.href='set.jsp?index=5'; 
      break; 
     case 39: window.location.href='set.jsp?index=7'; 
      break; 
     } 
    } 
    } 
</script>

출처

2015-01-09 arataj

나를 위해 ''는 222입니다. 여기에서 테스트했습니다 : http://www.cambiaresearch.com/articles/15/javascript-char-codes-key 코드 – Halcyon

대신 키 입력 시도 - http://stackoverflow.com/questions/20121252/how-to-get-right-left-up-and-bottom-arrow-key-value-in-jquery –

@Halcyon For me , 시험은 222도 보여줍니다. 그래도이 스크립트는 작은 따옴표를 누르면 반응하고 https://stackoverflow.com/questions/12008215/forbidding-apostrophewhile-typing-in-html-textbox에 대한 대답은 작은 따옴표에 키 코드 39를 사용합니다. . – arataj

의 e.keyCode 속성이 제로하고, String.fromCharCode(39)을 실행하면 작은 따옴표가 반환됩니다. 그 속성은 이벤트 객체에있는 경우

당신은 keyCode를 원하는 :

var keycode = "keyCode" in e ? e.keyCode : e.which;

그 속성은 이벤트 객체에 존재 때 키 코드 제로 얻을 그런 식으로하고 which 특성도 존재하는 경우.

document.onkeydown = function(event) { 
    event = event || window.event; 

    var keyCode = "keyCode" in event ? event.keyCode : event.which; 

    switch (keyCode) { 
     case 37: console.log("37 was pressed", event); break; 
     case 39: console.log("39 was pressed", event); break; 
    } 
};

편집 # 1 : 다른 주석 작성자와 답변이 정확합니다. keypress 이벤트로 제어 키를 감지하면 안된다는 사실을 잊어 버렸습니다. onkeydown로 변경되었습니다. 크로스 브라우저를 작동

전체 HTML 예 :

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Key Codes Test</title> 
</head> 
<body> 
    <script type="text/javascript"> 
     document.onkeydown = function(event) { 
      event = event || window.event; 

      var keyCode = "keyCode" in event ? event.keyCode : event.which; 

      switch (keyCode) { 
       case 37: console.log("37 was pressed", event); break; 
       case 39: console.log("39 was pressed", event); break; 
      } 
     }; 
    </script> 
    <input type="text" size="30"> 
</body> 
</html>

출처

2015-01-09 13:41:20

[* keyCode *는 더 이상 사용되지 않습니다.] (https : //developer.mozilla.[* which *] (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent.which)와 같이 org/ko-ko/docs/Web/API/KeyboardEvent.keyCode) 사용 가능한 경우 [* key *] (http://www.w3.org/TR/DOM-Level-3-Events/#relationship-between-key-code)를 사용해야합니다. [* Legacy keyboard events *] (http://www.w3.org/TR/DOM-Level-3-Events/#KeyboardEvent-supplemental-interface)도 참조하십시오. – RobG

텍스트 입력이므로 다른 사람이 화살표 키를 사용하여 입력 내에서 커서를 이동하려고 할 때 문제가있는 것처럼 보입니다. 따라서 이벤트 전파/버블 링을 중지하고 요청한 주요 문제를 해결할 수 있습니다. 따라서 결코 원치 않는 동작을 트리거하는 문서 요소에 도달하지, 입력 요소를 남겨에서 keypress 이벤트를 중지이 사용

// assuming you've grabbed an input in var input_ele 
input_ele.onkeypress = function (e) { 
    e = e || window.event; 

    if (e.stopPropagation) { 
     e.stopPropagation(); 
    } else { 
     e.cancelBubble = true; 
    } 
};

. 즉, 표준 컨트롤 요소의 예상되는 동작을 위반하지 않습니다.

출처

2015-01-09 13:40:45 JAAulde

주요 문제가 해결되지는 않지만 확실히 앱의 다른 문제를 해결하는 데 도움이되었습니다. – arataj

사용 keydown instread keypress

JS의 :

는

document.onkeydown=function(event){ 
    if(window.event) event=window.event; 
    var keycode=(event.keyCode)?event.keyCode:event.which; 
    switch(keycode){ 
    case 37: alert("an arrow"); 
     break; 
    case 39: alert("another arrow"); 
     break; 
    } 
}

바이올린은 다음 e.which 속성은 39입니다 http://jsfiddle.net/p9x1Lj4u/2/ 사용자가 작은 따옴표 키를 누르면

출처

2015-01-09 13:40:46 bluefog

keypress가 왼쪽/오른쪽 화살표와 같은 컨트롤 키를 캡처하지 않아야합니다. keydown 이벤트를 사용하는 경우, 작은 따옴표 키 코드는 222로 명확하게 충돌하지 않습니다.

출처

2015-01-09 13:42:33 elaijuh

자바 스크립트 키 코드 충돌 : "오른쪽 화살표"와 "작은 따옴표"

답변

관련 문제