어떤 문자 키를 눌렀는지 확인하는 방법은 무엇입니까?

118

순수 Javascript에서 브라우저 간 호환 방식으로 어떤 문자 키를 눌렀는지 알고 싶습니다.

javascript dom-events keypress

— 트리플 엑스
소스

1

"어떤 키 를 눌렀습니까?"라는 질문에 대한 모든 대답 이 아닙니까? 실행 중에 자바 스크립트 코드가 키보드의 키가 현재 눌러져 있는지 알고 싶다면 어떻게해야할까요?

— mwardm 2016 년

2

event.key직접 당신에게 프레스 문자 줄 것이다

— Gibolt

158

"지우기"JavaScript :

<script type="text/javascript">
  function myKeyPress(e){
    var keynum;

    if(window.event) { // IE                    
      keynum = e.keyCode;
    } else if(e.which){ // Netscape/Firefox/Opera                   
      keynum = e.which;
    }

    alert(String.fromCharCode(keynum));
  }
</script>

<form>
  <input type="text" onkeypress="return myKeyPress(event)" />
</form>

JQuery :

$(document).keypress(function(event){
  alert(String.fromCharCode(event.which)); 
});

— 코 요드
소스

6

이것은 알파벳 문자에 대해서는 잘 작동하지만 점 / 대괄호 및 기타 타이포 그 타프 기호는 어떻습니까?

— VoVaVc 2014 년

6

@VoVaVc : 그들에게도 작동합니다. 결정적인 것은 사용하는 keypress것이 아니라, 당신에게 문자 코드를 제공 이벤트, keyup또는 keydown당신에게 키 코드를 제공합니다.

— Tim Down

2

@aljgom은 e.key여전히 전체 브라우저를 지원하지 않습니다.

— Andy Mercer

1

!와 같이 만들기 위해 Shift 키를 눌러야하는 기호에는 작동하지 않습니다.

— Curtis

5

@AndyMercer 키는 이제 모든 주요 브라우저에서 지원됩니다 developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/...

— 레이에게

34

여기에이 질문에 대한 100 만 개의 중복이 있지만 어쨌든 여기에 다시갑니다.

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);
    alert(charStr);
};

내가 본 주요 이벤트에 대한 최고의 참조는 http://unixpapa.com/js/key.html 입니다.

— 팀 다운
소스

23

더 최근에 더 깔끔하게 : event.key. 더 이상 임의의 숫자 코드가 없습니다!

참고 : 이전 속성 ( .keyCode및 .which)은 더 이상 사용되지 않습니다.

node.addEventListener('keydown', function(event) {
    const key = event.key; // "a", "1", "Shift", etc.
});

단일 문자 만 입력되도록하려면을 선택 key.length === 1하거나 예상하는 문자 중 하나인지 확인하십시오 .

Mozilla 문서

지원되는 브라우저

— Gibolt
소스

node.js 용인가요?

— merrybot

아니요, 노드는 DOM 요소를 의미합니다. Node.js가 UI에 연결되어 있었다면 작동 할 것이라고 생각합니다

— Gibolt

일부 모바일 장치의 keydown이 작동하지 않는 경우 정의되지 않은 반환

— Angelotti

4

시험:

<table>
<tr><td>Key:</td><td id="key"></td></tr>
<tr><td>Key Code:</td><td id="keyCode"></td></tr>
<tr><td>Event Code:</td><td id="eventCode"></td></tr>
</table>
<script type="text/javascript">
window.addEventListener("keydown", function (e) {
  //tested in IE/Chrome/Firefox
  document.getElementById("key").innerHTML = e.key;
  document.getElementById("keyCode").innerHTML = e.keyCode;
  document.getElementById("eventCode").innerHTML = e.code;
})
</script>

스 니펫 확장

* 참고 : "Run code snippet"에서 작동합니다.

이 웹 사이트는 위의 코드와 동일합니다. Keycode.info

— Lewdev
소스

1

이것을 사용하십시오 :

function onKeyPress(evt){
  evt = (evt) ? evt : (window.event) ? event : null;
  if (evt)
  {
    var charCode = (evt.charCode) ? evt.charCode :((evt.keyCode) ? evt.keyCode :((evt.which) ? evt.which : 0));
    if (charCode == 13) 
        alert('User pressed Enter');
  }
}

— JCasso
소스

1

**check this out** 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(document).keypress(function(e)
        {

            var keynum;
            if(window.event)
            { // IE                 
                keynum = e.keyCode;
            }
                else if(e.which)
                    { 
                    // Netscape/Firefox/Opera                   
                    keynum = e.which;
                    }
                    alert(String.fromCharCode(keynum));
                    var unicode=e.keyCode? e.keyCode : e.charCode;
                    alert(unicode);
        });
});  

</script>
</head>
<body>

<input type="text"></input>
</body>
</html>

— kki3908050
소스

1

@Coyod의 2009 답변과 거의 일치하지 않습니까?

— Chris F Carroll

1

이 작업을 정교한 방식으로 수행하기 위해 제가 가장 좋아하는 라이브러리 중 하나는 Mousetrap 입니다.

다양한 플러그인이 제공되며, 그중 하나는 record누른 키 시퀀스를 식별 할 수 있는 플러그인입니다.

예:

<script>
    function recordSequence() {
        Mousetrap.record(function(sequence) {
            // sequence is an array like ['ctrl+k', 'c']
            alert('You pressed: ' + sequence.join(' '));
        });
    }
</script>


<button onclick="recordSequence()">Record</button>

— dipole_moment
소스

@DanLowe 방금 스 니펫을 추가했습니다.

— dipole_moment 2015

잡히지 않은 TypeError : Mousetrap.record는 HTMLButtonElement.onclick (****. html : 20)의 recordSequence (****. html : 12)에서 함수가 아닙니다

— Irrmich

-2

document.onkeypress = function(event){
    alert(event.key)
}

— Gomozor
소스