[react] 모바일로 웹페이지 접근시 key event 동작 안될 때

react 로 만든 웹 페이지를 안드로이드 기기로 접속하여 로그인 비밀번호를 입력하고 이동(엔터키)버튼을 눌렀으나 아무런 동작을 하지 않았습니다.

분명히 pc 와 아이폰에서는 잘 되는것을 확인했었는데 안드로이드만 안되네요.

const handleKeyDown = (event) => {

        const key = event.code;
        switch(key){
            case 'Enter':
                PasswordChk();
            break;
            default:
                alert('입력 값 : ' + key);
            break;
        }
	}

<keydown event 에 적용한 method>

 

다른 사람들이 쓴 글을 보니까 keyup과 keydown 이벤트가 안먹는다는 글이 보여서 확인해봤는데 동작이 잘 되긴했습니다.

그럼 해결방안은 뭐지 더 찾아보았습니다.

 

https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event

Element: keydown event - Web APIs | MDN

<keydown 참조한 사이트>

 

두 가지 방법이 있는것 같았습니다.

1. input 태그에 addListener 를 달아서 동작하도록 하기

2. keydown 이벤트를 그대로 쓰고 입력 받는 key code 를 바꿔보기

event 받는 두 가지 방법

내용을 확인하다가 아래의 내용을 발견했습니다.

event.code 를 사용

event.key 를 사용

 

기존에 작업한건 event.code 를 이용했었는데 물리적인 키인식이 되는것 같고 event.key 는 현재 나타난 키 값을 입력받을 수 있는것 같았습니다.

 

저는 두 가지 방법 중 두 번째 방법으로 해결 했습니다.

const handleKeyDown = (event) => {

        const key = event.code;
        switch(key){
            case 'Enter':
            	PasswordChk();
            break;
            default:
        }

        const key2 = event.key;
        switch(key2){
            case 'Enter':
                PasswordChk();
            break;
            default:
        }
    }

<event.key 를 이용한 방법 추가>

 

event.key 를 사용하니까 안드로이드 기기에서도 이동(엔터키)가 잘 동작합니다.