[Input 이벤트] input readonly, 백스페이스 기능

과제 테스트 준비

input 태그와 관련되어서 좀 더 심도있게 준비를 하게 되었다. 

 

🐇 readonly

유저가 input에 직접 값을 입력할 수 없다. 

<Input label="비밀번호" bottomText={description}>

<Input.TextField value={password} readOnly />

</Input>

readonly를 사용하면 된다. 

readonly를 사용하지 않을 때는 onChange 함수를 기입해야 한다. 

 

 

🐇 backspace 백스페이스 기능

입력된 값을 백스페이스로 지울 수 있다

1. input의 onKeyDown 메소드를 이용

<Input label="비밀번호" bottomText={description}>

<Input.TextField value={password} readOnly onKeyDown={event => handleKeyDown(event, 'password')} />

</Input>

이때, 매개변수가 1개라면 event를 생략할 수 있다.

ex) onKeyDown={handleKeyDown}

 

2. backspace 확인 및 기능 동작하는 함수 작성

const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, type: InputType) => {

if (event.key === 'Backspace') {

if (type === 'password') {

setPassword(password.slice(0, -1)); // 마지막 문자를 제거

} else {

setConfirmPassword(confirmPassword.slice(0, -1));

}

}

};