[React] 키보드 입력 감지하기

마우스 클릭으로 동작하는 가상키보드 컴포넌트를 만들었는데,

추가적으로 키보드 입력도 감지해달라는 요청사항이 있었다.

 

 

마우스 입력만 받는 가상키보드에서 키보드 숫자입력 받기

  useEffect(() => {
    const handleKeyDown = (e) => {
      const isNumber = /^[0-9]$/.test(e.key);
      if (isNumber) {
        passwordInput(Number(e.key));
      } else if (e.key === 'Backspace') {
        passwordInput('back');
      }
    };
    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [txtPass]);

 

 

 

개인프로젝트로 pin code 입력 컴포넌트를 만들고 있는데, 여기서도 비슷한 기능이 필요했다.

onChange와 onKeyDown 함수를 함께 사용해서 구현할 수 있었다.

 

(참고)

- input에는 최대 1글자만 입력할 수 있음

- 만약 이미 1글자가 입력되어 있는 인풋에 추가글자를 입력할 경우, 마지막에 입력한 글자로 대체됨

- 비어있는 input에서 backspace 누를 시 이전input으로 focus 이동

- 입력값은 숫자만 받음(문자X)

 

 

 

          <StyledInput key={uuidv4()}>
            <input
              type="text"
              maxLength={2}
              value={value}
              onKeyDown={(e) => {
                if (e.key === 'Backspace') {
                  handleBackspace(index);
                }
              }}
              onChange={(e) => {
                if (e.target.value.length > 1) {
                  const lastChar = e.target.value.slice(-1);
                  return handleChange(index, lastChar);
                }
                const isNumber = /^[0-9]$/.test(e.target.value);
                if (isNumber) {
                  return handleChange(index, e.target.value);
                }
              }}
              ref={(el) => {
                if (el) {
                  inputRefs.current[index] = el as HTMLInputElement;
                }
              }}
            />
          </StyledInput>